How can I make my image banner responsive?

Shopify Discussion

Topic summary

A Shopify store owner is seeking help to make their image banner responsive across different screen sizes and devices.

Key Details:

  • The user has included a screenshot showing their current banner implementation
  • The banner appears to have display issues that need fixing for proper responsiveness
  • No solutions or responses have been provided yet

Status: The question remains unanswered and open for community assistance.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

I want my image banner to be responsive , could anyone please help

Screenshot (365).png
Screenshot (365).png1366×768 184 KB

2

could you share your store url

3

Hi,

Hope this will help

  • Use wide images 1800px + and keep the essential part centered.

  • Set banner height to adapt to image or full width.

Add optional CSS

CSS Example

.banner__media img {
  width:100%;
  height:auto;
  object-fit:cover;
}
  • Avoid text baked into the image and test on different screen sizes.