Blogr - Progressive enhancement dropdown and burger menus

Hello there, Dave! 👋

Good job on this challenge! 👏 It's nice to see you thinking about how your site will work without JS (that's something I haven't played around with much, but perhaps I should, sometime)! 😀 (BTW, I like the little animation you added to the hamburger menu.) 😉

As for the overflow issue, I was just about to suggest something similar to pikamart's helpful feedback (using CSS grid and the overflow property). I think I encountered a similar thing in this challenge, if you'd like to take a quick look at the code (it was a long time ago, though, so I kind of forgot what I did). 😅

Keep coding (and happy coding, too)! 😁

@dwhenson Sure, I'll be glad to look into it again.

Right now, like you said, mangled some codes but the section now is really great which is awesome.

But now, to achieve like what you want, we still need to use overflow-x , since that cannot be achieved without using it, well for me. So set your main to overflow-x: hidden

Now in order to get that, we need to make some calculations which we will need. Since your main section is supposed to have that 1440px width, which you declare on the grid. This time set it to grid-column: 1/ 4 so that it will take the whole size. But doing this will stretch it out especially when it is a large screen right. Well, in order to cap it, we need to add some paddings and calculate how much we need.

The gist is, take the whole viewport, subtract it by the width that you want, which is 1440px, then divide the result by 2. We need to divide it by 2, so that we could apply the same size to both sides which will limit the size of the main.

Since calc does not allow nested calculations. Make a variable, any name, let's go for "initial". Declare --initial: calc(100% - 1440px). Then in your main section, apply a padding of padding: 0 calc(var(--initial) / 2). Then try resizing now your browser and you will achieve that^^

Hey, great work on this one.

The desktop layout, well it appears there's a scrollbar at the bottom which was caused by the overflowed image and I don't know but here in my end, the second section's layout , you could say destroyed. Though the mobile state seems fine.

This challenge was also hard for me when I did this but managed to complete it:>

Suggestions would be:

1. Since the first section's image is causing that scrollbar, you could add overflow-x: hidden in your main element. Also the dropdown icons in the menu bar is not appearing.

2. I don't know what happened here, in the preview the second section is good, but here in my end, it is destroyed. The background which is the colored dark blue with rounded corner, it is only half, the text is in the bottom, which should not be the case since it must be in the left side. You might want to check that one out.

3. Paddings. Adjusting those left and right side paddings will be really awesome like in the original layout.

But still, really great job on this one. My solution on this, is not as good as yours compared to accessibility, but managed to layout it well, you could check it if you want and you can also give comment to it which will be really awesome.

Great work^^