Image banner display mobile

nathalie3003
Visitor
1 0 0

Hello there,

I am trying to display different image banners on Web Browser vs. mobile. I am using Dawn theme. The issue I am having is that I would want the height of the mobile banner to be as it is - I do not want it to adapt to the height of the web browser image.

I have found a solution on this platform, however it fixes the height of the mobile banner to be the same as web browser, and I would like a large width for the web browser image, and a large height for the mobile image.

Any suggestion?

Thank you!

Replies 3 (3)

Liam
Shopify Staff
2731 299 769

Hi Nathalie3003,

 

You should be able to set up different image dimensions using media queries. These will set you define specific height and width settings depending on particular screen sizes. This tutorial on media queries should help you use these!

 

Hope this helps,

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Shawn512
Shopify Partner
111 2 15

link is broken

Pet Travel Supplies Small Business
Liam
Shopify Staff
2731 299 769

Apologies! The link is: https://www.freecodecamp.org/news/media-queries-width-ranges/

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog