Cumulative Layout Shift, how do I fix this?

[istilah]

Zencart= 1.56C
template = modified Responsive Sheffield blue.

I would like to ask for some CSS help.

I have been optimizing my website for ages; images, minifying scripts, gzip, etc in order to have a fast website.
But I can not seem to make Google happy enough, because my Cumulative Layout Shift (CLS) for Mobile on Web Core Vitals on all pages does not go below 0.25.
Which is rated: poor.
Mostly I get 0.27 or 0.28. Not a terrible score, but nonetheless: poor.

The culprit has been identified as div.col12. In all pages it is present and ruins my CLS score, mostly for 0.18 to 0.22.

Now, I kind of grab the concept of this CLS. But my CSS knowledge is weak.
Is there something I could improve on the CSS of this div to fixate it better on the page to avoid CLS?
Here is what I found in my CSS:

[class*="col"]{float:left;margin-left:5px;}
.col12,.row-col-wrapper{width:960px;}
.onerow-fluid>.col12{width:99.9999%;}

@media (min-width:768px) and (max-width:979px){
.col12,.row-col-wrapper{width:768px;}
.onerow-fluid>.col12{width:99.9999%;}

@media (min-width:1200px){.row{margin-left:-5px;}
.col12,.row-col-wrapper{width:1200px;}
.onerow-fluid>.col12{width:99.9999%;}

Would I need to define something for media up to 767px?
Could it be also caused by something inside this div?
What else should I do or try?

(Live shop is https://shop.waroeng.nl/?language=en)

All input appreciated!

[lat9]

Although I don't have an answer for you, I can certainly see that CLS issue on the main page during mobile viewing.

I think (but do not know) that the shift is caused during the display of the mobile version of the site's logo. Perhaps due to the lazy-loading of that image?

[istilah]

Thank you for your reaction.

I do not know either, so I will do some trial and error:
I excluded the logo from lazyloading, but it did not improve CLS.

Indeed, the best thing is to exclude this logo from lazyloading.

any more thoughts?

[istilah]

In Chrome the Dev Tools are very helpful!

If you inspect a page and record its loading, when Web Vitals are on, you can see the layout shift zone.
And in the summary I get results like this:

Score0.2539
Cumulative Score0.2539
Had recent input No
Moved fromLocation: [20,212], Size: [30x28]
Moved toLocation: [84,221], Size: [30x28] is home symbol
Moved fromLocation: [94,210], Size: [30x30]
Moved toLocation: [158,219], Size: [30x30] is search symbol
Moved fromLocation: [0,531], Size: [360x109]
Moved toLocation: [0,262], Size: [360x378] not yet clear what this is, maybe upper part product info
Moved fromLocation: [0,0], Size: [0x0]
Moved toLocation: [6,385], Size: [175x230] is product photo
Moved fromLocation: [0,0], Size: [0x0]
Moved toLocation: [6,635], Size: [348x5] not yet clear what this is
Related Node img

If you hover over these texts, you can see that zone on the page.

So, it is in the placing of the images, and some yet to be determined parts.
Now find a way to correct that...