Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro section with dropdown navigation

@sumaira10041

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Can anyone plzz tell me how to make it responsive .....i give two days to this page but still cant make it responsive...can someone tell me where i did mistake

Community feedback

Mr. Ryt 140

@MrRyt247

Posted

To achieve responsiveness, you must:

  • get familiar with flex & grid
  • media queries
  • learn to use other units (i.e. vw, %, vh, dvh, dvw, rem, etc.)

Flex and Grid can easily adjust when the window is resized. With the use of min-width / min-height and min() function, you can adjust the size the item can expand to or shrink to. Media queries enables you to redesign the page for different sets of screen sizes and even orientation (very useful for mobile devices). You can create the perfect webpage for each phone. 'px', 'in', 'ch', 'mm', 'cm', etc. is fixed. The properties defined for an element with such units never change for different screen sizes. But for units like '%', 'vw', 'dvh', they adjust when the window is resized which is great for responsiveness.

Marked as helpful

0

@sumaira10041

Posted

@MrRyt247 Thanks ....I will try to improve it

0
Anis Bacha 500

@AnisBacha

Posted

Hey, Good job for getting the desktop design done ! I noticed in the 'style.css' file that you started with the desktop design and then used media queries to adjust it for mobile, but it is recommended to first start your work with the mobile design and then try to adjust it to be a desktop design. This will save a lot of time in projects like this. You can look up 'mobile first design' for more information.

Also, like Johan mentioned, you'll need two separate navbars – one for the desktop view and one for the mobile view. To get it right, you might want to use some JavaScript to detect the window width and switch between the mobile and desktop navbars accordingly. Keep up the good work!

Marked as helpful

0

@sumaira10041

Posted

@AnisBacha Thanksss

1
Johan 200

@CallensJ

Posted

Hello, adding a global container at the beginning will prevent to manipulate the <body> directly. As for the responsive navbar you only wrote one navbar. this is not a responsive navbar who goes at the right side on mobile. this is two differents navbars. one for desktop one for mobile. you have to make some part disappear depending on what layout you are. im guessing its possible make one entirely responsive but....wow... As for the main content... Grid is life.. grid is absolute.. grid is everything ^_^

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord