Intro section with dropdown navigation
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
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MrRyt247
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 - @AnisBacha
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 - @CallensJ
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 ^_^
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