Amend banner size for desktop and mobile devices

liambeauchamp
Excursionist
17 2 2

Hello!

 

I am using the Taste Theme to build a website, and I've added an image banner to the homepage (screenshot attached) which looks great on a desktop device, but on mobile it crops the banner and cuts off most of the icons and text. Is there any code I can add that means the banner automatically reduces in size to fit a mobile device? 

 

Many thanks,

Liam

Screenshot2024-03-25at20.13.19-ezgif.com-crop.jpg

Replies 3 (3)

Natasha-Saed
Shopify Partner
411 45 70

Hi,

 

I recommend that you add another banner for Mobile devices with a different design to make it appear the way you want, then we can add a small code to show the banner in accordance to the device size

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint
liambeauchamp
Excursionist
17 2 2

Hi @Natasha-Saed - thanks for the reply. I do have another banner more suitable for a mobile device, so do you have the code needed to to show the correct banner in accordance to the device size? 

 

Posstack-Annt
Shopify Partner
49 2 10

@liambeauchampIt would be best to add a separate banner image for the mobile. If you consider using an app (like the Posstack Easy Content Builder), then you can add separate banners for Desktop and mobile without coding.

*PS. I'm the co-creator of the app, feel free to contact me if you have any questions.

(Free!) Easy Content Builder - No-code theme sections and metaobject templates for any Shopify store. Add pre-built sections, multi-column layouts, and customize right in the Shopify theme editor.