Hi there, I am currently working on a page of my website ( i use dawn theme). I created two images of a same chart for desktop and mobile because the desktop image is too wide for mobile. Then I added both images as image banner sections on the page. Now I want to hide the desktop image banner from…

Add this code Custom CSS of Image banner section that you want to hide on mobile @media (max-width: 768px) { .banner { display: none; } } And this to section you want to hide on desktop @media (min-width: 767px) { .banner { display: none; } } [Screenshot 2024-01-11 at 13.59.19.p…

Hi @Abdosamer , Thanks for the reply. It is like the screenshot below. These two charts are designed for desktop and mobile separately, but it is actually the chart with same info. So I want to hide the desktop chart from the mobile end. And hide the mobile chart from desktop end. [IMG_3756.PNG]

@NataliaWu , Can you please share your store url ?

Hey @NataliaWu Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated. Best Regards, Moeed

@NataliaWu , one great solution for you would be to wrap the two images inside the html tag, and use the media attribute to control when you want the images to appear based on screen size, for example: The first image will only appear on a screens larger that 600px , the other will appear on scr…

@Abdosamer , I am afraid I cannot share the store url with you. Sorry for that. Thanks for helping me. For the solution you provide, do i add the code directly in the CSS custom of the section?

@Abdosamer And can you please elaborate more on wrapping two images inside the html tag? I am beginner level so… Thanks

@NataliaWu , you have two images, each has its own url: put the urls inside the picture element , the first one will appear only if the screen is larger than 600px, I hope this was clear.

OMG this works and it is really straightforward for a beginner like me. Thank you so much! @Dan-From-Ryviu

The best, simplest answer. Thank you

How can I hide specific image banners on mobile or desktop views?

Store Design

Abdosamer January 11, 2024, 4:58am 2

Hi @NataliaWu , can you share screenshots of what you want to achieve exactly?

Topic		Replies	Views
2 different banner images on mobile and desktop Store Design design , customizations , css	4	304	April 3, 2024
Hiding image banner section on mobile view Store Design design , css	9	66	May 12, 2024
Separate Desktop and Mobile Image Banner - Ride Theme Store Design landing-page	5	233	January 26, 2024
Hide image banner on desktop view only Shopify Discussion shop-performance	5	46	July 21, 2023
How do i get a different image banner on mobile and desktop? Store Design css	5	174	August 11, 2023

How can I hide specific image banners on mobile or desktop views?

Related topics