Different Banner Sizes for Desktop & Mobile

Shopify Discussion
, , , ,

Topic summary

  • Issue: Banner looks correct on mobile but is too large on desktop; requester wants to adjust only the desktop size and will share the site URL privately via PM.

  • Theme capability: Many Shopify themes don’t support separate images for desktop and mobile. Contributors noted this can be enabled with custom code after reviewing the site.

  • Concrete solution (with code provided): Create two image banner sections—one optimized for mobile and one for desktop—and use CSS media queries to hide the non-targeted banner at each breakpoint (hide mobile above 750px; hide desktop below 749px). Media queries are CSS rules that apply based on screen width.

  • Support offered: Options include paid customization estimates via PM and assistance to implement the CSS/code approach.

  • Status: No confirmation of implementation or results yet. Next step is for the requester to share the store URL via PM for review and potential code changes.

Summarized with AI on December 18. AI used: gpt-5.
1

Hello.

I have a banner on my site, and it looks perfect on mobile view, however it is too big on desktop, and I want to change only the desktop size.

If you know how to do it, please reply here on the thread and I will PM you the site URL so you can have a look. (I want website to be anonymous thats why I PM you the URL)

Please help and thank you so much! :slightly_smiling_face:

2

Hi @manoman if you need paid customization services PM me the store link and link to this post, and I’ll take a look for an estimate.

https://community.shopify.com/c/notes/composepage/note-to-user-id/27332

3

Hi @manoman ,

Most Shopify Themes don’t have the option to select different images for Desktop and mobile. Could you please confirm if your theme has that option or not? There is nothing to worry if your theme doesn’t have that option. I will help you to add a code into your theme to enable that option. Please share the URL of your website so that I can take a look.

Best Regards,

4

Hi @manoman

You can create another image banner section and upload an image that fits the desktop. After that, you can add the codes below into the Custom CSS of each section so the Image Banner section for mobile hides on the desktop and vice versa.

Add this code to mobile’s banner section

@media (min-width: 750px) {
.banner { display: none; }
}

This code in to Custom CSS of image banner section of desktop

@media (max-width: 749px) {
.banner { display: none; }
}