Homepage image banner shows grey block

Store Design

Topic summary

A user encountered an issue with the Dawn theme’s homepage image banner displaying a large grey block above or below the images on both desktop and mobile, instead of adapting to the image height.

Proposed Solution:

  • Add custom CSS code to the theme.liquid file before the </head> tag
  • The code targets the banner’s padding-bottom property and sets it to 0 using !important
  • Includes both desktop (min-width: 750px) and mobile-specific styling

Outcome:

  • The initial CSS solution made the banner too narrow
  • The user ultimately resolved the issue independently by re-uploading both images in exactly the same size and adjusting the banner height in the code
  • Issue marked as resolved
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I hope someone out here can help me fix an issue I’m facing regarding the image banner on homepage (Dawn theme). I want the banner to adapt to the height of the images, but it keeps showing a large grey box either above or below. Both on desktop and mobile..

Would love to hear from you! Thanks in advance :slightly_smiling_face:

https://the-lena.studio/

Pw: Lenaversie2!9624

1 Like
2
  • Here is the solution for you @AnneP96
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liqid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
@media screen and (min-width: 750px) {
    #Banner-template--20849935286602__image_banner_bxiq4P::before, #Banner-template--20849935286602__image_banner_bxiq4P .banner__media::before {
        padding-bottom: 0 !important;
    }
    #Banner-template--20849935286602__image_banner_bxiq4P::before, #Banner-template--20849935286602__image_banner_bxiq4P .banner__media::before, #Banner-template--20849935286602__image_banner_bxiq4P:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: 0 !important;
    }
}
  • Here is the result you will achieve:

BSSTekLabs_0-1724673348917.png
BSSTekLabs_0-1724673348917.png1917×732 123 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

Thank you. Unfortunately the banner is really narrow now.. It should display both full images and the text centered on top of the images like you did. Can you help me achieve that?

Scherm­afbeelding 2024-08-26 om 14.19.17.png
Scherm­afbeelding 2024-08-26 om 14.19.17.png556×926 295 KB

4

I managed to fix it by re-uploading the two images in exactly the same size, and adjusting the banner height in code. Thanks anyways!

1 Like
5

Glad to help you. have a good day.

Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you