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…

It could be solved for mobile or desktop only, could not be solved both devices by open your image banner or slideshow liquid file, find this line of code. loading="lazy" Change to this {% if forloop.first == false %} loading="lazy" {%- endif -%}

Thank you for this. It works for hiding banner on mobile but not on desktop for me.

Please try to update the code Add this code to Custom CSS of mobile section. @media (min-width: 750px) { .banner { display: none; } } Add this code to Custom CSS of desktop. @media (max-width: 749px) { .banner { display: none; } }

Thanks, but still not working right for me. Basically, I just want to hide for desktop.

So just add this code to Custom CSS of that section. Also, could you share your page so I can check? @media (min-width: 750px) { .banner { display: none; } }

I added your code, but still the same issue on desktop. You can see on this page (green section): https://fd94b3-bd.myshopify.com/collections/all-available/Available

Could you take screenshot where did you add the code?

[Screenshot 2024-10-21 at 10.57.37 PM.png]

You can try to update code to this. @media (min-width: 750px) { #shopify-section-template--17425720705190__image_banner_UgDTPh { display: none !important; } }

I get error message “Online store session editor cannot be published” with the new code.

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

Store Design

CDBLtd October 22, 2024, 3:17am 33

That hid the collection page banner, not the section I needed hidden on desktop: https://fd94b3-bd.myshopify.com/collections/all-available/Available

Topic		Replies	Views
2 different banner images on mobile and desktop Store Design design , customizations , css	4	316	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	239	January 26, 2024
Hide image banner on desktop view only Shopify Discussion shop-performance	5	48	July 21, 2023
How do i get a different image banner on mobile and desktop? Store Design css	5	179	August 11, 2023

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

Related topics