Jump to content

Issue with media queries & Smart Cache CCC


Laurine_srd

Recommended Posts

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 by Laurine_srd (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;}

 

post-1343739-0-94627100-1502885137_thumb.png

Link to comment
Share on other sites

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 by Scully (see edit history)
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Scully (see edit history)
Link to comment
Share on other sites

  • 1 month later...

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...