Insights gives me the following warning when analyzing my blog “Avoid significant layout shifts” and the ones that contribute the most are those in this screenshot.
If I write this code in my CSS file, would it solve the problem? Would it work for any post size or just for this specific one? I use media queries to define different screen views, should I place it only in the smallest screen size or in all sizes?
.entry {
width: 100%;
min-height: 200px; /* Minimum height */
height: auto; /* Will adjust according to content */
}
#container {
width: 100%;
min-height: 400px; /* Minimum height */
height: auto; /* Will adjust according to content */
}
height: auto; isn’t needed because that’s default browser behavior unless you’ve fixed the height somewhere above this.
As to where to put the min-height stuff, put it where the layout shift occurs. If it occurs in all sizes, then put it in the base css. If it only happens in specified widths, put it in the appropriate media query section.
I don’t know how to check if it happens at all widths, I just know that in the one analyzed by Insights, it occurs differently for mobile view or desktop.
In any case, would it solve the problem for all cases, or just for this specific post it’s showing on? I’m looking for a way for it to adapt to any post size I publish, without causing a CLS variation that would require me to review it again.
Although your CSS should resize the images on smaller screens, it is good practice to define image sizes like this in the HTML, usually at the largest size the image will appear at on any screen.
This lets the browser know how much space the image will take on the page before the image has loaded, thus avoiding the layout shift that happens when the image does load, often after the HTML and CSS has loaded and rendered the initial page layout. Setting both width and height gives the browser an aspect ratio to calculate the space even if it has been scaled down in CSS with max-width.
The same applies to other similar elements such as iframes and videos.
I understand what you’re saying, but in my case, most of it is text, which is what it points out as CLS variation in the Insights analysis of https://www.fotov60.com. The elements it highlights in the current view are what you can see in this screenshot, which I imagine will change when I publish new posts. However, could the generic containers be changed in a “generic” way so that in the new posts, similar elements don’t cause these CLS changes?
