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.
1

Dear people,

i tried everything includung different sizes banners, coding but somehow i can not seem te get my new made baner to show right on my website keeping the same aspect ratio. Whatever i do it keeps showing it blurry or wrong size and apect ratio my website is https://lucky4voeter.nl paswrd: Temp12 can someone help me to fix this please.

Thank you so Mutch!

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
3

Do ii need to add the code on every one of those files or in just one of them ?

4

One of them @Antonynex

1 Like
5

Thank you so mutch it seems to work on the desktop version, but not on the mobile version, do you have a solution for that to Please ?

6

Try this code.

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

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

Thank you so Mutch, these codes do work properly ! Verry mucht appriciate your time effort and help !

8

Please mark my solution @Antonynex