How to code different banner images for mobile and desktop views?

Store Design
1

Hi,

How do I edit the code such that the banner image differs when its viewed on mobile vs desktop?

www.buddings.co

Appreciate any comments.

Best,

Marianne

2

@Buddings

Go to Online Store->Theme->Edit code then go to assets/index.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
.image__img { -o-object-fit: contain; object-fit: contain;}
.slideshow__asset--full_height {padding-top: 60vh;}
.slideshow .flickity-viewport {height: 60vh !important;}
}

Thanks!

3

Hello! Thank you for your solution. This is not what I want though. I would like to display a different picture when it is viewed on mobile vs desktop

1 Like
4

Hi there @Buddings ,

I see what you are trying to achieve. This can only be done if your theme already supports this feature otherwise you’ll need developer assistance to custom code the hero section to display different image on mobile and desktop. You can contact me if you want my help.