How to make banner images responsive from desktop to mobile views

Store Design
, ,

Topic summary

A user is experiencing issues with an “As Seen In” banner where fonts and images shrink excessively on mobile devices. They’re using the Dawn 14.0.0 theme on Shopify.

Problem identified: The entire banner image (including embedded text) was shrinking on mobile, making text illegible.

Solution approach:

  • Separate the text from the banner image
  • Create a new banner with image only
  • Add text separately through customization settings

Current status:

  • Mobile view now displays correctly with text above the image using custom CSS code added to base.css file
  • Desktop view still has positioning issues—text overlaps the image and logo placement needs adjustment
  • The helper indicated that desktop requires different CSS settings than mobile

Technical details: Custom CSS with media queries (@media screen and max-width: 749px) was used to control flex-direction and padding for mobile responsiveness. The discussion remains ongoing as desktop styling still needs to be resolved.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
17

@JenniferF - replace old code with this

@media screen and (max-width: 749px) {
#Banner-template--22812441805081__image_banner_zJhjLQ{flex-direction: column-reverse;}
#Banner-template--22812441805081__image_banner_zJhjLQ .banner__box{padding: 2rem 3.5rem;}
}
1 Like