Dawn Theme - On home page, show two image banners on desktop, but just one on mobile

Store Design
1

I am using the Dawn theme (version 12.0.0). On the home page image banner, I am showing two images and it looks great when viewed on a desktop. However, it doesn’t look very good when viewed on a mobile, so I would like to show just one of these images. The only standard option is to “stack images on mobile” which I do not want to do.

How can I show just one of the images on mobile while continuing to show both images on desktop? Any help would be greatly appreciated.

Thanks!

2

Hi @dh12 , can you share your store url?

3

Hi @dh12

Please drop your store link so I can provide the code to do that for your banner

4

https://lepom.se

5

Please add this code to your theme.liquid file before tag in Online store > Themes > Edit code

6

Hello @dh12 ,

To hide one of the images for mobile you can add a unique class to the image in the “image-banner.liquid” file. Add the below media query to the CSS file or in the Custom CSS option in the theme customizer.

image_2023_11_21T12_39_46_952Z.png
image_2023_11_21T12_39_46_952Z.png1506×600 41.2 KB

@media only screen and (max-width: 767px) {
  .hide-mob {
    display: none;
  }
}
7

Thanks @Dan-From-Ryviu , this worked great! Now I have the one image showing on mobile just like I wanted :slightly_smiling_face:

How can I make this mobile image longer (ie I want it to take up more of the length of the mobile screen)?

8

Please update code to this
9

Amazing! Works like a charm! Thanks so much, @Dan-From-Ryviu !

10

You are very welcome