Different Banner Sizes for Desktop & Mobile

[manoman]

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! 🙂

[PaulNewton]

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 

[Rohail_Ali_12]

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,

[Dan-From-Ryviu]

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; }
}