Issue with media queries & Smart Cache CCC

[Laurine_srd]

Hello,

I am using Prestashop 1.6.0.14.

Lately, I worked on the blocklayered module: I managed to set it up in the center column. This is working perfectly.

 

When I did turn on the firefox's inspector, I've noticed something strange: some media queries were already affecting the blocklayered module, such as @(min-width:768px) and only on the blocklayered and only when CCC smart cache is activated. I did look for these media queries in the CSS files, but there are nowhere to be found. I tried reseting the cache, firefox's cache too, tried it on Chrome, but the issue is still here.

Maybe I missed something?  I've attached a screenshot so you can see what I mean if I'm not clear enough

Does anyone knows how to fix this ?

Thanks

Laurine

Edited August 16, 2017 by Laurine_srd (see edit history)

[Scully]

There is no screenshot available - or at leas I don't see it. Furthermore I did not understand the problem you are facing by reading your text. Especially not this sentence:

 

some media queries were already affecting the blocklayered module

[Laurine_srd]

Thank you for answering

 

Indeed, my bad, here's the screenshot.

In case you don't see it, here is what the firefox inspector displays when the Smart Cache CCC is active :

 

                      v_114_cdf1e6eb8a2a949a18a4af87521a2b4c_all.css(min-width:768px)
#layered_block_left div > form > div > div {
    margin-top: 5px;
    width: 50%;
    display: inline-block;

 

And when it's not active:

 

                       blocklayered.css:60

#layered_block_left div > form > div > div {
    margin-top: 5px;
    width: 50%;
    display: inline-block;}

 

[Scully]

You can't rely on the inspector if you have enabled CCC for CSS. The problem is, the whole content of the (CCC) compress CSS file is stored on one line. And inspectors usually reference to a certain line number.

 

This results in my recommendation to test CSS changes only if CSS for CSS is disabled. If a change works with disabled CCC for CSS, it also works with enabled CCC.

Edited August 16, 2017 by Scully (see edit history)

[Laurine_srd]

I know, this is something I've noticed.

 

When I do some modification to the css, it does work as long as it is on the web version. When I try it on my mobile or tablet, it doesn't work, when CCC is turned on. It's as if the rules I've add never existed. I've tried adding my own media queries, still not work.

This is why I find this weird.

[Scully]

You observation is not completely surprising. There might be other settings overwriting yours. If several CSS selectors might be matching, the one with the closest match in terms of ID and class is choosen. If the exact same selector is used at different places, the latest one loaded is used.

Edited August 16, 2017 by Scully (see edit history)

[Railabo]

The same issue here... don't know why when CCC enabled Presta take all my custom module css and puts it in "@media screen and (min-width: 1000px)" media query. 

 

WTF? Any help? 

[Scully]

Themes must be compatible for CCC caching. It is the themes issue - not Prestashop.

[Railabo]

Themes must be compatible for CCC caching. It is the themes issue - not Prestashop.

 

You're right! 

 

But the details are important. For sure it's a bug in a template. I found the one of mine. Tracing that "@media screen and (min-width: 1000px)"  query I found that the dynamically generated css by .php main fail of a theme module configurator has bug. There was missing "}" bracket after this query and whole css after that query was only active for resolutions higher that 1000px.

 

So Laurine_srd, please check your template configurator module if the css ganarated by it is valid enough and has not such basic syntax errors. This leads to very strange behaviours sometimes.

 

WIth regards

 

Krys

[Laurine_srd]

Hello,

I was suspecting something like that, however I still have not fixed this

I did run my css on CSS Lint & W3C, and nothing.  Maybe I'll find it later

Thanks anyway