media query will never be rendered in scss

Question

I've started using Sass in my projects and I've come across a peculiar problem that I never faced using vanilla CSS.

For some reason my media queries will never get rendered (even when placed at the bottom of the file and the criteria is met); the browser will always render the original properties and their values unless I use !important (which I don't want to do because it's bad practice and just unnecessary).

I've tried putting the media queries at the top of the file and still nothing.

This is my code:

#content .result{
    display: inline-block;
    width: 725px;
    border-right: $border;
    vertical-align: top;
}

// this will be shown in Chrome developer tools when the viewport reaches 1120 pixels or less, 
// but all the new properties will be crossed out and the browser will decide to use the old
// values instead - i have no idea why
@media screen and (max-width: 1120px){
    .result{
        // will all be crossed out
        display: block;
        width: auto;
        border-right: none;
    }
}

Now I don't know if I've missed something completely obvious (unlikely, I've used media queries hundreds of times), or this is just a quirk of Sass, but any help is greatly appreciated. Cheers.

EDIT: As you can see, I have no other styles defined. And, the media query is in fact almost 200 lines after the original property declarations.

is that style _all_ the style you have or are you including other css files? Maybe are you repeating some declarations? — Fabrizio Calderan, Aug 05 '20 at 09:51
@FabrizioCalderan No other CSS files are being added. I've checked the developer tools and there are no dual declarations. — GROVER., Aug 05 '20 at 09:52
Seems to be working alright - https://codepen.io/painotpi/pen/poyowKQ — painotpi, Aug 05 '20 at 09:52

score 1 · Accepted Answer · answered Aug 05 '20 at 10:03

1

You have a more specific rule #content .search-results that wins over .search-results.

Either you remove the #content selector from the first rule or you add it inside the mediaquery so both the selectors can have the same specificity.

answered Aug 05 '20 at 10:03

Fabrizio Calderan

120,726
26
164
177

Oh wow, I had no idea that media queries played favourites. – GROVER. Aug 05 '20 at 10:05
1

As a side note, in the question you should put the _actual_ relevant code, which is different. – Fabrizio Calderan Aug 05 '20 at 10:05
Minified it for ease of view. My file is almost 600 lines, so I didn't want to include things I thought might stray away from the topic at hand. Accidentally left out something important - will edit now. Cheers – GROVER. Aug 05 '20 at 10:06
Ref sheet of sorts: https://specifishity.com/ – painotpi Aug 05 '20 at 10:07

media query will never be rendered in scss

1 Answers1