Autoptimize CSS breaks website

  • Resolved thijsjoostenda

    (@thijsjoostenda)


    4 years, 7 months ago

    Hi there,

    I’ve been having issues with the styling of the website. Whereas the front-end looks different from the design I’ve created in the back-end.

    I’ve used beaverbuilder to built my website and here’s how it looks in the backend: https://community.wpbeaverbuilder.com/uploads/default/original/2X/5/5622204f7207829675b8c1ba8a92dbfc5c567f26.png

    However, in the frontend the layout settings from the beaverbuilder are overwritten: https://tj-da.com/nl/

    I’ve searched for the answer after being in contact with beaverbuilder. And I notice that it might have something to do with Autoptimize. When I turn off the Autoptimize plugin completely I lose all of my styling on the page. I’ve found that this is specifically when I turn off the “Aggregate CSS-files?” option.

    Can you point me in the right direction on why Autoptimize seems to change the layout settings I’ve set in the beaverbuilder?

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 7 months ago

    Morgend Thijs;
    At first sights the page as I see it matches the design from your screenshot, or am I missing something?

    I also tested with Autoptimize disabled (by adding ?ao_noptimize=1 to the URL) and all looked all right as well. What I did notice in the HTML in that case is that you have a plugin that adds expires headers (e.g. wp-content/plugins/AddExpiresHeaders-premium/cache/1636452290/com/processed-header-adc4ef63837237a08e12348aab9b1888.min.css), this might be conflicting somehow somewhere maybe?

    frank

    Thread Starter thijsjoostenda

    (@thijsjoostenda)

    4 years, 7 months ago

    Do you also see the page that way when you’re looking at it incognito or with cache disabled?

    This is what I see: https://community.wpbeaverbuilder.com/uploads/default/original/2X/8/801f8f535c0c74c4c94bd8000680adf6944e0d7d.png

    I will try to disable the AddExpiresHeaders and see what that does.

    Thank you.

    Kind regards,

    Thijs

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 7 months ago

    Given I had never visited your website before, it can not have been in cache, but just to make sure I retested in Chrome & FF incognito and in all cases the title is correctly aligned.

    Thread Starter thijsjoostenda

    (@thijsjoostenda)

    4 years, 7 months ago

    I’m using Cloudflare for Server Side caching. So I think it could be possible to be in cache, just not on your computer.

    But I don’t understand why the version on your computer does display the correct format.

    I’ve also checked on other computers and seen the same result as on mine, with a weird layout.

    On another note, when I switched off the ‘aggregate css files’ in the autoptimize settings my page looks like this: https://tj-da.com/wp-content/uploads/2021/11/Autoptimize-aggregate-CSS.png

    Why does this happen when I switch off Autoptimize and how come it only changes the layout on this page and not on any of the other pages on my site.

    Thank you for the help, it is much appreciated 🙂

    Kind regards,

    Thijs

    Thread Starter thijsjoostenda

    (@thijsjoostenda)

    4 years, 7 months ago

    I’ve switched off the add expires headers plugin and the website is working accordingly now!

    Thank you for the help!

    Kind regards,

    Thijs

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 7 months ago

    Graag gedaan Thijs 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Autoptimize CSS breaks website’ is closed to new replies.