• Resolved LPackman

    (@furnituresuppliesuk)


    Hello, I am using the Divi theme, when I enable Load CSS Asynchronously so I can use critical css it breaks my shop page layout. The page changes from 5 columns to 2 columns with huge whitespace in between them.
    Is there a simple fix for this please, maybe I need to exclude something from async?
    The link I have provided is a live site so may need to disable the Async for now.
    I hope you can help.
    Thank you

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support Hai Zheng⚡

    (@hailite)

    Hi this happened bcos it used mobile version for desktop. We got a familiar report one day before. We will work on it and let you know. Thanks!

    Thread Starter LPackman

    (@furnituresuppliesuk)

    @hailite

    Thats great I look forward to hearing from you. Thank you 🙂

    Hey there, I was having the same problem with Divi. Try to exclude woocommerce-smallscreen.css in the tuning tab.

    Hi @furnituresuppliesuk, can you check are there any JS error when you turned ON Load JS async?

    Thread Starter LPackman

    (@furnituresuppliesuk)

    @powdermilkman thank you for sharing that with me, unfortunately I already have this excluded without .css, I tried including .css and the layout is still broken.

    @stanleylitespeed no errors in console just broken layout.

    I have enabled it once again so you can see the issue by viewing the link I provided.

    🙂

    Thread Starter LPackman

    (@furnituresuppliesuk)

    My local site seems to be working fine so I reset LS on live site and tried to import LS settings from local site but I get this.

    There has been a critical error on your website. Please check your site admin email inbox for instructions.

    I tried to import the original settings before I reset them and I get the same error.

    Have also tried with troubleshooting mode enabled and I get same error. 🙁

    Thread Starter LPackman

    (@furnituresuppliesuk)

    @stanleylitespeed

    Sorry I may have misinformed, after some more testing I now see that the issue only occurs when I enable “Generate Critical CSS”, it is then clear that as previously advised it is trying to use mobile version with only 2 products per row.

    Probably not related however I understand there is a url for the ccss server which is recommended to be whitelisted, is there by any chance an IP I can whitelist rather than url?

    Many thanks.

    @furnituresuppliesuk Ah, with generate critical css there are still problems with woocommerce-smallscreen.css.

    What I had to do was exclude woocommerce-smallscreen.css and also install a plugin that will let you selectively unload css files page by page and unload woocommerce-smallscreen.css from pages where ccss was screwing up. I also told ccss to create a separate ccss for every page by entering “page” into the “Separate CCSS Cache Post Types”.

    Really I think it might be best to turn off ccss generation and just create your own and put it in “Critical CSS Rules” in the tuning tab until litespeed updates ccss.

    @furnituresuppliesuk here’s the IP list. But @powdermilkman is right, as you already generated CCSS that mean you do not have connection concern.

    Do you have a staging site for us to check on it with CCSS setting turned ON?

    Plugin Support LiteSpeed Lisa

    (@lclarke)

    Hi,

    I’m going to mark this topic “Resolved,” due to lack of activity.

    If you still need help, let us know. We’ll be happy to reopen the topic.

    Thanks!

    Hello,

    Got the same problem with the shopkeeper theme. When activating Load CSS Asynchronously in Litespeed WordPress plugin it breaks 5 colunms in my shop to two columns.

    Any simple solution yet?

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Load CSS Asynchronously Breaks Page Layout’ is closed to new replies.