CODEWITHSUNDEEP
htmlcssflexboxsidebarcls
Shinesfox
Shinesfox

Reputation: 49

How to reserve space for Sidebar to fix CLS (cumulative shift layout) Issue?

When Sidebar loads it shifts the main content towards left causing CLS issue

Live Preview for better analysis: https://premiumerblogger.blogspot.com/2024/07/vegas-pro-plugins-that-you-need-to-know.html

Hello there, I've been trying to fix this CLS (Cumulative Layout Shift) issue for days but haven't been able to.

As you can see in the image, when I reload the page, the <main> element (Article content) loads first, centered using the justify-content: center; property. But when the sidebar (<aside> element) loads, it shifts the main content to the left, causing a CLS issue. I want to reserve space for the sidebar while keeping the main content's width the same and everything, including the sidebar, centered on the page.

I've tried many solutions, but they end up changing the styling on my homepage. Is there anyone who is an expert in CSS and can join me on AnyDesk to share my screen? We can work together to fix this issue. Your help would be greatly appreciated. Thank you so much. The HTML code for and is too long however here's the CSS:

.maxC{margin-inline:auto;padding-inline:var(--contentPadding); max-width:var(--content-maxWidth)}    .mainB{gap:var(--contentSpace)} .mainB .blogB{width:calc(100% - (var(--sidebarWidth) + var(--contentSpace))); transition:width var(--tDuration), max-width var(--tDuration)} .mainB .blogB.item{max-width:var(--contentPost-maxWidth)} .mainB .blogB.static{max-width:var(--contentPage-maxWidth)} .mainB .sideB{gap:var(--contentSpace);width:var(--sidebarWidth); max-width:500px} .mainB .sideSticky{position:-webkit-sticky; position:sticky;top:calc(var(--headerHeight) + 10px)} .mainB .sideB .widget:not(:first-child){margin-top:var(--contentSpace)} .flex {
    display: flex;
}.flex.wrap {
    flex-wrap: wrap;
} .grow {
    flex-grow: 1;
} .flex.column {
    flex-direction: column;
}

.shrink {
    flex-shrink: 0;
}

and here are the values for the variables: --contentPadding: 16px; --content-maxWidth: 1300px; --contentSpace: 40px; --contentPost-maxWidth: 780px; --sidebarWidth: 280px; --tDuration: .1s ease; #CSS #HTML

Upvotes: 3

Views: 120

Answers (1)

imhvost
imhvost

Reputation: 10001

You can add .mainB::before while your aside is loading. A simple example:

setTimeout(() => document.querySelector('.mainB').insertAdjacentHTML('afterbegin', '<aside class="sideB"></aside>'), 2000)
.mainB {
  --sidebarWidth: 80px;
  --contentSpace: 40px;
  min-height: 100px;
  flex-direction: row-reverse;
  justify-content: center;
  display: flex;
  width: min(400px,100%);
  margin: auto;
}

.blogB {
  width: calc(100% -(var(--sidebarWidth) + var(--contentSpace)));
  background-color: blue;
  flex: auto;
}

.sideB {
  gap: var(--contentSpace);
  width: var(--sidebarWidth);
  max-width: 500px;
  background-color: yellow;
  flex: none;
}

/* Here it is: */

.mainB:has(.blogB:only-child)::before {
  content: '';
  width: var(--sidebarWidth);
  flex: none;
}
<div class="mainB">
  <div class="blogB"></div>
</div>

Upvotes: 2

Related Questions