Divi blog layout invisible when inline & defer CSS

  • Resolved eurekagirl

    (@eurekagirl)


    6 years ago

    Hello! I recently paid for the Autoptimise Critical CSS power-up and i activated the inline and defer CSS option. Everything else on my blog seems to work fine but on my homepage, if you scroll to “featured blog posts” section, the Divi blog layout becomes VISUALLY invisible. I can still click on it, the urls and placement of my blog posts are all there, the blog layout seems intact. But it’s just invisible.

    The problem sometimes goes away when i refresh the page. But it will come back randomly.

    Any help would be appreciated!

    • This topic was modified 6 years ago by eurekagirl.

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

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

    (@optimizingmatters)

    6 years ago

    Based on my investigation the problem is the column class is not assigned to the parent of the articles, leading to

    .et_pb_blog_grid .et_pb_salvattore_content[data-columns] et_pb_post{opacity:0;}

    applying (so making the content invisible) but

    .et_pb_blog_grid .et_pb_salvattore_content[data-columns] .column et_pb_post{opacity:1}

    not (which would otherwise make the content visible).

    Possible solutions;
    * excluding wp-content/themes/Divi/includes/builder/scripts/ext/salvattore.min.js from JS optimization
    * adding .et_pb_blog_grid .et_pb_salvattore_content[data-columns] et_pb_post{opacity:1;} to the custom CSS (possibly with !important flag)

    hope this helps,
    frank

    Thread Starter eurekagirl

    (@eurekagirl)

    6 years ago

    Hi Frank,

    Thanks for the fast reply! I’ve tried the 2 possible solutions, both at the same time and separately, but it’s still invisible. It’s visible between refreshes.

    The issue disappears if i stopped using ‘inline & defer css”. Is there any other way for me to exclude that blog grid from being affected by the ‘inline & defer css’ option?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    6 years ago

    Hmm, can you try changing

    .et_pb_blog_grid .et_pb_salvattore_content[data-columns] et_pb_post{opacity:1}!important

    into

    .et_pb_blog_grid .et_pb_salvattore_content[data-columns] et_pb_post{opacity:1 !important;}

    Thread Starter eurekagirl

    (@eurekagirl)

    6 years ago

    I have added that to the Custom CSS but still the same. I saw someone having a similar issue here: https://wordpress.org/support/topic/blog-module-grid-layout-fails/

    But their fix (Animation set to Fade) didn’t work on mine either.

    Do i have to edit the parent theme file directly? Though i’m not sure where the .et_pb_blog_grid is located at exactly in the theme editor.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    6 years ago

    still fiddling with CSS, try 

    
.et_pb_blog_grid .et_pb_salvattore_content[data-columns] .et_pb_post{opacity:1 !important;}

    instead (the . in front of et_pb_post was missing in action).

    Thread Starter eurekagirl

    (@eurekagirl)

    6 years ago

    That worked perfectly! Thank you!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    6 years ago

    you’re welcome, feel free to leave a review of the plugin and support here! 🙂

    have a nice weekend (well, almost),
    frank

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

The topic ‘Divi blog layout invisible when inline & defer CSS’ is closed to new replies.