Is there something messed up with the CSS structure?

Using Media queries for placing an image in an absolute position (thankfully not many sites have me do this, but this one has quite a few I will need to work with). I had to remove the default phone size setting as it kept overriding the rest no matter what I tried. But, after I did that I had to rearrange the 3 media queries from small to large order in the CSS file. Typically it’s been default XS size at the top and then from XXL to XS beneath it.

Anyways, I’ve never had to rearrange them from small to large before, so I’m wondering if there’s something I’m not understanding on how this is ordered in BSS.

If you’re doing a mobile-first styling (min-width queries), which has pretty much been the standard for a while, you’ll need to order the queries from XS to XXL in the CSS file (keep in mind that the blocks in the Styles tab are sorted by priority, so they’ll appear in reverse order there). If you’re using max-width queries, you need to order them from XXL to XS. Styles that are not in media-queries should go before the media queries in both cases. In the first case, that will be the style for mobile, and in the second - for desktop. Hope this clears it up!

2 Likes

Thanks Gabby, strange that I’ve never had to deal with it until yesterday though. I’ve been doing the mobile first for quite some time, but … in my defense (lol) I have changed some to max-width here and there so that could be the issue. I have it down now though, thanks for the information!