My eCommerce site (Shopify) has an announcement bar that pushes the rest of the page content down, causing CLS issues.
I’ve been searching through forums and articles for a while but all of the advice about solving CLS is super generic ("Make sure not to have pop-ups!") with a lack of guides for actual implementation.
The height of the announcement bar is a fixed 46 px on all devices, so this theoretically should be easy to fix by somehow assigning room for it in the theme files, but I can’t figure out how to do so.
2
Answers
This should do the trick! add it at the end of your css stylings.
Are you sure it’s the announcement bar? I had similar issue but it was the admin bar which only shows if you are logged in (I assume as admin) which was causing biggest CLS. When tested in a private browser, no issue