Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
finishlinewheels.com
homepage failing CLS for Desktop. (it does well in Mobile)
banner image is causing .072, the main contributor, see below and the referenced code.
main#MainContent > section#shopify-section-template--15833734447275__image_banner > div#Banner-template--15833734447275__image_banner > ::after <::after> | 0.072 |
section-image-banner.css is where i think the banner image needs changes.
this file has a section of code for the "banner_media"
i think i need to change a bit of code to assign size attributes, height and width.
the picture of the corvette (banner media) is 1219px by 579px
what do i need to do to fix the CLS issue with this image for Desktop?
this is the Default Code (current code) in that file:
.banner__media {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
Hello @deakon,
To resolve this issue, you must remove the lazy loading for this banner section.
Follow the steps below to get this fixed.
Hope it helps. Let us know if you need any further help.
Regards,
CedCommerce
did not work,
can anyone else help on this?
thanks!!
Hello mate,
We are OneExperts from OneCommerce - an eCommerce solution platform.
You can set specific width and height to decrease CLS like below:
.banner__media {
height: 579px;
position: absolute;
left: 0;
top: 0;
width: 1219px;
}
Of course you also need to pay attention to set the size according to responsive
Hope this can help you solve the problem. If you need any further support, hit us up at julia@onecommerce.io for replies within minutes
Get know us at: Website | Blog | FAQ | Contact us
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025