I have noticed CLS issue in Vercel speed insights tab on my website a couple of days ago and today in the morning, I decided to investigate what was causing this issue.

I found out that the footer element causes all the mess by going to "Performance" tab in Google Chrome. I noticed that the smaller screen size is, the higher score (>0.20) I get and it's always pointing to the footer element.

I use flex display style, not grid, to style the footer the way I need, and I have attached important SCSS code, so you can see it.

I attached screenshots explaining + showing the issue.

An interesting fact: the footer element doesn't cause CLS issue (the score is 'good') on the home page, but only on specific ones. I suppose that might be happening because pages I am referring to have dynamic content, which is loaded from the DB.

I read a lot about CLS and potential solutions, but just preserving some space for the footer itself and sub-elements like "navigationSections" and "bottomContainer" doesn't solve the issue!

I tried to get this issue solved with top AI models (Claude 4.0 sonnet, o3) but they all didn't succeed by asking detailed, specific questions to analyze 2 files .tsx and .scss to identify the points that might be causing it.

My goal is to reach CLS score to be under 0.1 on all pages by solving the issue with the footer element.