1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Layout Shift issues

Discussion in 'Free Divi Community Forum' started by tsader, Jul 18, 2022.

  1. tsader

    tsader New Member

    I searched the forum for the same related issue and the only suggestion I keep seeing is to turn on Static CSS File Generation

    Which I did but it does not solve my issue. The main culprits are

    et_pb_section
    et_pb_row
    et_pb_text_inner

    Does anyone know how to fix this issue without the Static CSS File Generation option?

    Thanks
     
    #1 tsader, Jul 18, 2022
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may try the below & see if it helps:
    1. Go to WP Admin > Divi > Theme Options > Integration > Header Code & add <style>html{display:none;}</style>
    2. And add this for Body Code as well: <style>html{display:block;}</style>

    If still not working, try the below options & see if it works:

    upload_2020-5-20_23-32-54 (4).png
     
    #2 Divi.Help, Aug 4, 2022
  3. tsader

    tsader New Member

    Hi,

    Thanks for the reply and suggestions.

    Unfortunately, placing <style>html{display:none;}</style> in the header and body makes no difference.
    And when using the Static CSS options it makes the layout shifts worse

    Thanks
     
    #3 tsader, Aug 6, 2022
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    That's weird. Using Static CSS should help to ease the layout shift.

    But anyway, one last thing you may try is this tutorial: https://www.markhendriksen.com/how-to-fix-divi-flashing-unstyled-content-on-page-load/

    If still not working, then you will have to use preloader plugin to hide the layout shift issue.
     
    #4 Divi.Help, Aug 10, 2022
  5. tsader

    tsader New Member

    Unfortunately, that didn't work either. Some settings made it even worse. I think it might have something to do with the font I am using, Montserrat.
    I have my fonts locally hosted and have turned off Google Fonts. Is there a way that I can change the Font Display to "Swap"... for locally hosted fonts with Divi or other plugins or manually?
     
    #5 tsader, Aug 12, 2022
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
(You must log in or sign up to post here.)