How to hide one of two images in an image banner on mobile

Store Design
, , ,
1

Hi there, I’m have an image banner block as my hero image right now with two images within it and text/content container centered left. The client would like only one image to show on mobile (with the content container shown as well on mobile so it isn’t overlapping the image) but I’m struggling to get it to hide only one image (the left one).

I’ve tried to code it several different ways such as using:

@media (max-width: 749px) { div.banner__media.media, banner__media-half { display: none !important; } }

This hid both images though.

Does anyone know how to target one specific image within it? Thanks.

2

Hello,

I recommend that you do two banners one for desktop and the other one for mobile and hide the first one for mobile and the second one for desktop. If you add the banners I can walk you through on how to do it, also share your store url please

3

Hi @njwnd ,

Can you share your store URL and a specific image so that I can check?

Best,

Daisy

4

Hi @njwnd ,

I haven’t got your response yet. Can you share so that I can check?