Responsive Layout using Flexbox

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

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 ;)

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.