Banner does not show right

Store Design
, , , , , ,

Topic summary

A user encountered issues with a banner displaying incorrectly on their Shopify store (lucky4voeter.nl), appearing blurry with wrong size and aspect ratio despite trying different banner sizes and coding adjustments.

Solution provided:

  • Add CSS code to one of the theme’s stylesheet files (base.css, theme.css, style.css, main.css, or custom.css)
  • Initial code fixed desktop display using img.carousel-item-img.d-none.d-lg-block selector with width: 100%, height: auto, and object-fit: cover properties

Mobile fix:

  • Additional CSS targeting img.carousel-item-img.d-lg-none was needed to resolve mobile display issues
  • Combined code snippet addresses both desktop and mobile versions

Status: Issue resolved. The user confirmed both code solutions work properly across devices.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
2

Hi @Antonynex ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

img.carousel-item-img.d-none.d-lg-block {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}
1 Like