Why aren't original styles redefined in @media ? The weight of selectors is the same .home .breadcrumbs , there is no id in the selectors. How to make @media override the following styles?

Example 2

CODE style (scss)

 $breadcrumbs_margin: 40px; .home { .breadcrumbs { font-size: 100%; padding: 0; height: 100%; ul { padding: 0; margin: 0; } li { margin-left: $breadcrumbs_margin/2; margin-right: $breadcrumbs_margin/2; a { font-weight: normal; font-size: 115%; } } } }

Mobile code (scss)

 @media only screen and (min-width : 320px) { .home { .breadcrumbs { font-size: 70%; li { margin-left: 1.1vw; margin-right: 1.1vw; } } } }

CODE index (Jade)

 link(rel="stylesheet", type="text/css", href="css/style.css") link(rel="stylesheet", type="text/css", href="css/mobile.css")

Indeed, now I decided to try min-width , since The question was created quite a long time ago.

  • Original styles must first go, then @media. In this sequence, everything is redefined when activating one or another @media. And about the <meta name="viewport" content="width=device-width, initial-scale=1" /> do not forget. - Visman
  • So it is, first the original styles, then @media (max-width: 1000px) , @media (max-width: 880px) and so on. !important in the originals not - Herrgott
  • It seems to me that your request does not work, because nesting of classes differs from the original: in the original - #news .news_item-title in the request - #news .news_item .news_item-title Specify in the request exactly the same cascade as in the original - Alex
  • Show the code? Maybe there's something else there that redefines the styles. It is not clear that you still use max-width or min-width . Maybe the serial connection of the mobile.scss and style.scss files is not correct. - greybutton
  • @greybutton strongly changed the question - Herrgott

2 answers 2

If you want the following to work:

 @media only screen and (min-width: 1200px) .home .breadcrumbs { font-size: 100%; }

There are two possible solutions:

  1. Determine the max-width of @media for mobile phones;
  2. Writing !important DOM property.

The first solution:

 @media only screen and (min-width: 320px) and (max-width: 1199px) .home .breadcrumbs { font-size: 200%; } @media only screen and (min-width: 1200px) .home .breadcrumbs { font-size: 100%; }

The second solution:

 @media only screen and (min-width: 320px) .home .breadcrumbs { font-size: 200%; } @media only screen and (min-width: 1200px) .home .breadcrumbs { font-size: 100% !important; }

Otherwise, you have one rule superimposed on the other, since, starting with a width of 1200px, there are two cases:

 font-size: 200%; font-size: 100%;

As a result, only what was definitely earlier will work:

 font-size: 200%;

PS Greetings countryman.

    From what I see on your screen, everything is redefined quite logically. You have the first style.css file with the code for all permissions, followed by the second mobile.css file with the media expression code @media screen and (min-width: 320px) , which will override your previous CSS code in the range of screen resolutions from 320 pixels . That is, when you turn on a mobile emulator or enter from a mobile phone where the resolution is 320 pixels, the code from the style.css file will not be overridden by the code from the mobile.css file.

    To override the CSS for devices 320 pixels or less, you need the media expression @media screen and (max-width: 320px) { ... } . That is, in a media expression you specify the limits of application of your code, where min-width is the starting point of the application of the code, and max-width is the end point. For example, to make the code for devices from 320 pixels to 600 pixels, you need the media expression @media screen and (min-width: 320px) and (max-width: 600px) .