Blogr - Progressive enhancement dropdown and burger menus

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  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)! 😁

  1

  ---

  

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  Thanks @ApplePieGiraffe as always for the feedback - it took quite a while to get things working without JS - I never know if it's worth the extra effort or not, but hopefully this will get easier!

  I'll have a check out of your challenge there and see if I can manage to implement pikamart's suggestion above this evening. I was hoping for a simple solution through a CSS rule but never mind!!

  Thanks for checking this one - much appreciated!

  1
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @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^^

  1

  ---

  

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  @pikamart Awesome! Thanks for the really clear explanation here - I just gave this a go and I think it's working really nicely.

  Just one small change from your suggestion, I just went with: padding: 0 calc((100% - 1440px) / 2); rather than using a custom property. I think it works.

  Thanks again - really appreciated!

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  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^^

  1

  ---

  

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  @pikamart thanks so much for the feedback. I mangled some code during my final sort before deployment hence the “destroyed” section!

  I think it should be better now if you have a moment to review?

  On the overflow issue. I would don’t want to crop the image with overflow hidden so it looks nice on big screens. Do you know if it is possible to just prevent scrolling, even if there is some horizontal overflow?

  I did a quick google but couldn’t find anything useful.

  Thanks again!

  0