[Support request] CLS issue on

[Joken]

Hello @diggeddy,

My website has three columns left sidebar content and a right sidebar. When I run my website https://itsourcecode.com/ in Google pagespeed i got problems in CLS, specifically the

the left and right. Please help me how to solve this issue.

[Joken]

When I run it in google page speed, I got this CLS issue

<div class="content-area">
<div class="widget-area sidebar is-left-sidebar">
<div class="widget-area sidebar is-right-sidebar"> 

can you please help me how to fix this issue? what would be the CSS code to implement to solve this problem?

[David]

Hi there,

tricky one, as you have custom sidebar widths, and i am not sure if it is that CSS that is causing the issue or some deferred loading of the HTML causing it.
If its the latter, you can try adding this CSS:

@media(min-width: 768px) {
    #primary {
        margin-left: auto;
        margin-right: auto;
    }
}

But i am not sure if that will help.

Let us know.

[Joken]

Hi, thanks for your reply. Yeah, I agree that this is a tricky one. I have here some CSS code maybe you might have any idea on to fix this one.

.right-sidebar .site-content {
justify-content: flex-start;
}
.both-sidebars .site-content {
    justify-content: center;
}

.left-sidebar .site-content,
.both-left .site-content {
    justify-content: flex-end;
}

.site-content .content-area {
    width: calc(100% - 600px);
}

.is-left-sidebar {
    width: 20%;
}

.is-right-sidebar {
    width: 20%;
} 

[Joken]

Also, I do not have a problem with the mobile device because in most of my testing, I got 0 score in CLS.

[Joken]

BTW, I have tried your code but it doesn’t work as expected.

[David]

Does the CLS persist if you remove all your custom CSS?
need to ascertain whether its a CSS issue or a CSS / HTML loading issue.

[Joken]

Hi, I tried to remove all the additional CSS to test the site. But sad to say, I still got the same CLS issues.

[David]

Hmmm… we may have to try some hit and miss CSS options:

.site-content .content-area {
    margin-left: auto;
    margin-right: auto;
}

[Joken]

I will try this code if my testing wasn’t successful for the meantime I run several tests and troubleshoot if these issues are caused by some caching plugins or anything. I will update you soon. thanks

[David]

Keep us posted!

[Author]

Posts