Skip to content
Submitted over 4 years ago

Mobile-first solution using media query for desktop version

BrunoElo•10
@BrunoElo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

During the implementation of media queries for larger screens, most of the stylings were not working as normal...I had to use a handful of "!important" which I'm not really a fan of...what could be the cause of this please?

Community feedback

  • Emmilie Estabillo•5,540
    @emestabilloPosted over 4 years ago

    Hi Emeka, this happened because of CSS cascade. The stylesheet always reads from top to bottom. Take, for example, the .topcont class. You declared margin-top: 0 on line 47, and another declaration on line 70. The one on line 70 will be applied because it is declared last (unless it is under a specific media query). Try this: remove all !important declarations and move lines 12-59 at the bottom of the stylesheet and see if that makes a difference. Hope this helps!

    2
    BrunoElo•10
    @BrunoEloPosted over 4 years ago

    Oh my goodness...this worked! Thank you so much.

    0
  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hi Bruno, avoid using !important, start from not using id's for styling via css, use classes for that - better for maintenance and easy to overwrite due to low specificity.

    Roman

    1
    BrunoElo•10
    @BrunoEloPosted over 4 years ago

    Oh alright...thanks. I'll take note of this.😤

    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