How can I make both image banners full height on mobile?

Store Design

Topic summary

A user is attempting to make two image banners display at full height on mobile devices but encounters an issue where only the first banner responds to the CSS styling.

Root cause identified:

  • Both banners share similar IDs, differing only by a suffix (one ends with _XtFcX6)
  • The CSS targeting appears incomplete or malformed in the provided code

Current status:

  • The user shared their CSS code (which appears corrupted/reversed in the thread)
  • A community member requested the store URL to investigate
  • The user provided their Shopify store link for troubleshooting

Technical context:

  • Issue involves CSS media queries for screens under 749px width
  • Relates to Shopify theme customization with image banner sections
  • The discussion remains open, awaiting diagnostic feedback
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hello Guys, i try to make my image banners full height on mobile, but it only seems to work on the ffirst image banner? I want both the banners to be full height on mobile, but it seems like i cant do it - because my image banners has the same ID? So when i try only the first one will get full height

Image banner 1 ID:

Banner-template–21003591450947__image_banner

Image banner 2 ID:

Banner-template–21003591450947__image_banner_XtFcX6

Below are the codes i use

@media screen and (max-width: 749px) {
#Banner-template–21003591450947__image_banner:before, #Banner-template–21003591450947__image_banner .banner__media::before, #Banner-template–21003591450947__image_banner:not(.banner–mobile-bottom) .banner__content::before
{
padding-bottom: 180.5% !important;
}
}

@media screen and (max-width: 749px) {
#Banner-template–21003591450947__image_banner_XtFcX6:before, #Banner-template–21003591450947__image_banner_XtFcX6 .banner__media::before, #Banner-template–21003591450947__image_banner_XtFcX6:not(.banner–mobile-bottom) .banner__content::before
{
padding-bottom: 180.5% !important;
}
}

2

Hi @mich706e

Could you share your store URL to check?

3

can i pm you privately?

4

https://pa-stal.myshopify.com/ this is my storeelink