Double header on mobile after creating critical css

  • Resolved conaertbob

    (@conaertbob)


    3 years, 10 months ago

    Screenshot of problem

    After creating critical css with jetpack boost I get a double header (logo, titel, slogan) on mobile. On the laptop everything seems fine.

    Asked a few friends to try to reproduce the problem, and they get the same results with android and chrome.

    If I turn of the critical css function everything works fine.

    I’m pretty sure this ain’t a theme problem, because I get the same results when switching themes.

    I have all the latest versions of WordPress, themes, and plugins.

    Tried deactivating any plugins, clearing cache and reactivating one by one. Anything is fine when I do that untill I turn on the critical css function. When I reactivate it the problem pops up again.

    Any ideas how to fix this? I kind of need the critical css thing to work, because otherwise my performance for mobile goes down quite significant 🤔

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support lastsplash (a11n)

    (@lastsplash)

    3 years, 10 months ago

    Hi @conaertbob –

    When I tested your site, I am getting the same issue when Critical CSS is turned off.

    You can test with Critical CSS turned off using this URL parameter:

    https://thechillishop.eu/?jb-disable-modules=critical-css

    That gave me the result shown in this screenshot:

    https://d.pr/i/5Sbxs9

    I’m did test Critical CSS generation on a default install of your theme (Botiga) and did not get the duplicated header on mobile. Are you adding custom code and or CSS?

    Can you share a screenshot of the same issue happening on a default theme such as Twenty Twenty One?

    Thread Starter conaertbob

    (@conaertbob)

    3 years, 10 months ago

    @lastsplash thank you for your reply really appreciate it. Could not reproduce the error again with twenty twenty one, strange because it did a few days ago.

    Reactivated the botiga theme, everything looks fine. Screenshot

    Did the critical css thing problem reappeared Screenshot

    I’m not adding any custom code or css manually, I do have a few plugins because this is a live e-commerce website.

    Strange thing is also, when creating the critical css on the twenty twenty one theme it creates 4 files. Doing the same with botiga theme it creates 12 files Screenshot

    • This reply was modified 3 years, 10 months ago by conaertbob. Reason: Mixed up.the screenshots
    Mohamed Mehdi Benchalal

    (@muffinpeace)

    3 years, 10 months ago

    Hi @conaertbob

    That’s normal that for different themes, there’s a different number of CSS files that are created since that depends on how their styling is made and coded.

    Since you are experiencing the issue specifically with the Botiga theme, a conflict is possibly causing the generated Critical CSS option to show a doubleheader on your website. My suggestion is to test any other theme again, and if it’s only happening with the Botiga theme, you may want to turn off that option or use another theme.

    Best,

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

The topic ‘Double header on mobile after creating critical css’ is closed to new replies.