Dear support
we noticed a issue with our mobile CLS on a new enfold page of us: Planet Blue If I run pagespeed insights there is always a mobile CLS shift of <div id=”main” class=”all_colors” data-scroll-offset=”70″> with more than 0.2. I am not able to find out how to fix that. Tried to give the headline, layout row or section a min height on mobile without luck.
We are using current enfold version, wordpress current and newest WP rocket for caching.
Any idea to fix that? Issue occurs on nearly every page….
Thanks in advance Marc
Hey Marc,
Thank you for your patience, the <div id=”main” class=”all_colors” data-scroll-offset=”70″>
refers to your whole page, when I check your page it looks like the second color section with the boxes are using a negative margin, try changing this so it applies only to the desktop version.
Perhaps you can also try this css to ease the top parallax section shift on each page:
@media only screen and (max-width: 450px) {
#top #av_section_1,
#top #av_section_1 .container{
max-height: 742px;
height: 742px;
}
}
Also try disabling the wp-rocket lazyload option so the elements load on page load and not after, this is what CLS is watching for.
Best regards,
Mike