Skip to content
Submitted over 3 years ago

Responsive Layout, Grid, Flex, JS

Simon Stranks•510
@SStranks
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

General question about CSS vs JS;

I used the 'toggle' JS method to add/remove classes to elements, but I had to add the classes again within the media query section otherwise the JS wouldn't apply the changes.

What is the reason for this behaviour?

Any other suggestions or comments welcome. Thank you :)

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey, well the reason for this is that your .share-nav and .display class have the same specificity right. Okay so when you reached your breakpoint, the 768px you declared the .share-nav to be display of none, that is why even when you toggle the .display class, it will not make any changes since your .share-nav is declared at that and if you added the .display class to the breakpoint as well, remember that css styling goes from top to bottom. So first it sees your .share-nav to have display of none, then it sees the .display to have display of flex, that is why adding .display class inside the breakpoints helps you. But if you don' want that, you could just make use of this selector, change your .display selector, the one outside the breakpoint, change it to .show-nav.display now this make sure that it have higher order than just .show-nav . If you need more clarification, feel free to drop it here^^

    0

Please log in to post a comment

Log in with GitHub

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