How can I adjust mobile image banner size to match PC version?

Topic summary

Main issue: the mobile image banner appeared too small compared to desktop on a Shopify store.

  • Helper requested the store URL and initially provided CSS to add in theme.liquid before . Early snippets were incorrect and targeted a slideshow, so they had no effect on the image banner.
  • After correcting to code for the image banner template, the first case was resolved.

Follow-up case (different store): the mobile image banner was again too small.

  • Helper first suggested slideshow-specific CSS under a mobile media query; user clarified they needed changes for an image banner.
  • Solution approach: add CSS targeting the image banner section (class .banner–adapt) in that section’s Custom CSS. A screenshot was shared to show where Custom CSS is located (image attachment central to guidance).
  • When both desktop and mobile became cropped, the helper limited the change to mobile only (media query max-width ~749px) and adjusted the banner height, which resolved the issue.

Outcome: resolved. Key takeaway: ensure the correct component (image banner vs slideshow) is targeted and apply mobile-only CSS via media queries to adjust height without affecting desktop.

Summarized with AI on January 9. AI used: gpt-5.

Sorry, I can’t see the banner section in the Custom CSS.