Responsive Layout using Flexbox

Community feedback

• Account deleted

  Hello Jimmy,

  I do not generally recommend setting a fixed height on divs, this will cause issues if your text overflows for instance, with the div staying the same height, but the text overflowing below it.

  In order to align things properly, use Flexbox. That way you can align divs to the top or bottom or centre of other divs, or the parent container. This will be much easier. So far what you have is not too bad actually, just fiddle around with the CSS a bit more on the media queries to get the design closer. In conclusion for this part, don't set height on elements unless you're doing something like how I have implemented the mobile menu below. Just let elements expand their height as needed, which is what happens by default.

  As for the menu, this is how I did it. Firstly create the hamburger menu icon and set its default display property to hidden, give it an onclick event handler that when clicked changes the display property to block or flex. Now inside the mobile navigation div that is shown when you click the hamburger menu, add a cross with another onclick event handler that when clicked changes the display to hidden. This will now toggle your mobile menu on or off.

  To style the mobile menu simply give it a height of 100vh so it's always the height of the device screen and set it's display property to fixed, so it's always on the screen when open. Then set top to 0px and right to 0px, this will position it so it's snugly fitted against the top right corner of the screen. If you do this the menu will always be the perfect height, will allow you to still scroll up and down the website and will be fitted perfectly into the top right corner.

  If you found this helpful please mark as helpful,

  Thanks

  0
• 

  Sören Maschmann•190

  @DontMashPosted about 2 years ago

  You did a really good job Jimmy! The colors and composition of elements are close to the solution.

  I would like to point out one small thing which would solidify your solution: The alignment of the elements relative to each other is incorrect. You might want to look up display: grid property. This is a resource I would suggest. Cheers ;)

  0
• 

  J J Williams•350

  @WilledwestPosted about 2 years ago

  Hi there, you can implement the hamburger menu by using the img element tag, or are you asking how you can make the menu function, by opening and closing? which can only be done by implementing javascript into your work. not all your divs will have an equal height of course because you're using divs for elements and reason.

  0

  ---

  

  Sören Maschmann•190

  @DontMashPosted about 2 years ago

  @Willedwest I'm sorry to correct you but it is possible to solve this without any JS.

  You can use links to element-ids to style the targeted element by with the css pseudo selector :target. If you apply this concept to a sidemenu it can slide in/out.

  If you're interest you can have a look at my see my solution.

  0

  

  J J Williams•350

  @WilledwestPosted about 2 years ago

  @DontMash Just checked out your work, I can clearly see that you used tailwind CSS. I used vanilla CSS, you check out my work and how I did mine.

  0

  

  Sören Maschmann•190

  @DontMashPosted about 2 years ago

  @Willedwest Frameworks like Tailwind or Bootstrap do not add functionality to CSS. Even supersets like SASS/SCSS or LESS don't add functions or properties. They just group properties or make them more accessible/easy to use. You can achieve the same result with vanilla CSS.

  0