Skip to content
Submitted almost 2 years ago

Product Preview Card Component

Amr_Hesham•160
@amoorihesham
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

please rate it...

when I change the text sizes in media queries the original sizes override the changes I used the " !important" flag to force the changes to happen please can anyone explain why the original sizes override the new ones in media queries?

Community feedback

  • oussama el omri•210
    @oussamaelomriPosted almost 2 years ago

    Ok, I will tell you what is the problem. The problem is "cascade": the order of CSS rules matter (the order of selectors is very important). Cascade and inheritance read this article specially the part of Cascade, it will help you a lot. You write firstly in your CSS stylesheet @media (max-width: 767px){} (you target mobiles), and after it, you target desktops. to solve this problem reverse the CSS code, first target the desktop, and after it target mobile, and you will avoid the !important flag

    Marked as helpful
    0
    Amr_Hesham•160
    @amooriheshamPosted almost 2 years ago

    @oussamaelomri

    Thank you. I got the idea.

    1

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