[Support request] CLS Issue with Additional CSS

[Dhiraj Jha]

Dear GeneratePress Team,

I am writing to you regarding an issue I am having with my website. I recently added some code to customize the Heading, Background, Sidebar, and image shadow, but after doing so, my website’s CLS (Cumulative Layout Shift) increased from 0.02 to 0.27 to 0.59.

Below is the code.

img {

margin-top: -0.0px;

border-radius: 12px;

box-shadow: rgba(23,43,99,.2) 0 7px 48px!important;

}

.inside-right-sidebar ul li{

	text-align:center;

	padding-top:6px;

	padding-bottom:10px;

	background-color:#ffb766;

	margin-top:3px;

	margin-bottom:3px;

}

.entry-content h2 a,

.entry-content h3 a,

.entry-content h2,

.entry-content h3  {

    font-weight: 900;

    transition: color 100ms;

	 text-transform: uppercase;

	border-bottom: 2px solid rgb(136, 136, 136);

	    box-shadow: inset 0-34px 0 #bdff67;

}

Additional CSS Code.

div.page-header-image-single.grid-container.grid-parent {display: none}

/* GeneratePress Site CSS */ .inside-article,

.sidebar .widget,

.comments-area {

	border-right: 2px solid rgba(0, 0, 0, 0.07);

	border-bottom: 2px solid rgba(0, 0, 0, 0.07);

	box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);

}

.separate-containers .page-header {

	background: transparent;

	padding-top: 20px;

	padding-bottom: 20px;

}

.page-header h1 {

	font-size: 1.5em;

}

.button, .wp-block-button .wp-block-button__link {

	padding: 15px 25px;

}

@media (max-width: 768px) {

	.post-image img {

		max-width: 100%;

	}

} /* End GeneratePress Site CSS */

.entry-content,

.entry-summary {

      text-align: justify;

}

#content a {

    font-weight: bold !important;

}

img {

margin-top: -0.0px;

border-radius: 12px;

box-shadow: rgba(23,43,99,.2) 0 7px 48px!important;

}

.inside-right-sidebar ul li{

	text-align:center;

	padding-top:6px;

	padding-bottom:10px;

	background-color:#ffb766;

	margin-top:3px;

	margin-bottom:3px;

}

.entry-content h2 a,

.entry-content h3 a,

.entry-content h2,

.entry-content h3  {

    font-weight: 900;

    transition: color 100ms;

	 text-transform: uppercase;

	border-bottom: 2px solid rgb(136, 136, 136);

	    box-shadow: inset 0-34px 0 #bdff67;

}

Here is link for my website https://www.mycreditcardclub.com/

I am hoping you can help me resolve this issue so that I can continue to use the Generate Press theme on my website.

Thank you for your time and assistance.

Sincerely,

Dhiraj Jha

[David]

Hi there,

if you remove the CSS – does the CLS go away ?

[Dhiraj Jha]

Yes, without Additional CSS, the CLS comes almost to Zero 0.02

[David]

Remove each CSS rule one by one to eliminate which ones are causing the issue.

[Author]

Posts