Autoptimize disrupting layout

  • Yesterday I was alerted to some layout problems with my site on mobile. My site’s posts have a main content area with a right sidebar. When the screen becomes narrow enough for the sidebar to reposition at the bottom, the main content is not filling the space vacated by the sidebar. Instead, the main content just continues to become narrower as the screen becomes narrower, leaving white space across most of the right side of the screen.

    When you scroll down to the bottom, I can see the sidebar content filling the full width of the screen as intended, so this layout problem seems to be only with the main content area.

    I deactivated plugins one-by-one and the problem resolves when Autoptimize is deactivated. I checked with GeneratePress support, and their feeling is that Autoptimize is scrambling the order of the CSS. Is there anything you can do about that?

    (I currently have the plugin deactivated, so you’re unlikely to see the issue by visiting the site.)

    Thank you!

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

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

    (@optimizingmatters)

    First and foremost try to identify what is breaking things by just disabling CSS or JS or HTML or Image optimization (incl. lazyload). Based on that we can see what the next steps need to be ??

    frank

    Thread Starter erikrolfsen

    (@erikrolfsen)

    It seems to be “Optimize CSS code” that’s doing it. Everything loads fine when that is turned off but the JS and HTML are turned on.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, if you enable “optimize CSS” but disable “aggregate CSS”, does that still work?

    Thread Starter erikrolfsen

    (@erikrolfsen)

    The problem persists when I enable “optimize CSS” and disable “aggregate CSS”.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    and does this also happen when “minify inline CSS & JS” is not active?

    Thread Starter erikrolfsen

    (@erikrolfsen)

    Yes, it does.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, now in the CSS optimization exclusion field, can you try excluding one of below each line and report back?

    * wp-content/themes
    * OR wp-content/plugins
    * OR wp-includes/js

    Thread Starter erikrolfsen

    (@erikrolfsen)

    With “Optimise CSS code” enabled I tried adding each of the above to the “Exclude CSS from Autoptimize” field, one at a time. The layout problem persisted for each of them. Only when I disabled “Optimise CSS code” afterward did it correct.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    hmm, running out of ideas here … do you have a staging site where you could leave things broken so I can look the bug in the ugly eyes?

    Thread Starter erikrolfsen

    (@erikrolfsen)

    Sure. Can I get you the URL and login info privately? I have your Gmail if that works.

    Update: Actually, I can’t seem to re-create the problem on the staging site, so I’m not sure that will help!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    that makes things even weirder .. any differences between the live & staging sites that could explain the fact the problem does not occur on staging?

    Thread Starter erikrolfsen

    (@erikrolfsen)

    I mean, none of the services I use know my staging URL, so the following have only the live site’s URL:

      ad management platform
      CDN
      Critical CSS

    So I guess none of them are doing their thing on the staging site.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    ah, critical CSS! Can you try if disabling “remove render-blocking CSS” fixes the problem on your live site?

    Thread Starter erikrolfsen

    (@erikrolfsen)

    That does seem to fix it.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, so did you add “above the fold CSS” or did you create manual “critical CSS” rules or are you a criticalcss.com customer?

Viewing 15 replies - 1 through 15 (of 42 total)
  • The topic ‘Autoptimize disrupting layout’ is closed to new replies.