Solved

Why is hiding a Shopify section on desktop not working?

LBmedia
Tourist
6 0 2

Help! I'm baffled.

 

I am trying to hide a section on desktop only and it's not working.


I'm looking to hide #shopify-section-16268988909f0f72b3

i've used 
@media screen and (min-width: 750px) {
#shopify-section-16268988909f0f72b3 {display:none;}}

 

but it's still showing up on desktop.

i've also used 

div#shopify-section-16268988909f0f72b3 {display:none;}}

and then @media screen and (max-width: 749px) {display:block}} but then it doesn't show up on mobile!

 

Any insight would be greatly appreciated.

https://thehazelcollection.com/

password: glauts

 

Screenshot 2021-07-21 135739.png

Accepted Solution (1)
g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

@LBmedia it's because one of your media-queries brackets isn't closed properly. You don't need so many media queries. If you're trying to modify CSS it is better to write it in the media-query tag which is already available, rather than create another one. 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

Replies 15 (15)

KetanKumar
Shopify Partner
36839 3635 11972

@LBmedia 

sorry for that issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/stylesheet.css->paste below code at the bottom of the file.

@media (min-width: 740px )  {
div#shopify-section-16268988909f0f72b3 {
    display: none;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LBmedia
Tourist
6 0 2

Thanks for the info - I just tried and unfortunately it didn't work - it is still showing up on desktop. 

LamQSolutions
Shopify Partner
131 30 44

Hi,

I see that you put the code inside two block

@media screen and (max-width:740px) {

You should put the code outside any block

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling - Create scroll-based animations visually.
Ultimate Sections - Slideshow, Gallery, Collection, FAQs, Brand, Info box, Testimonial and more
LBmedia
Tourist
6 0 2

Thanks for this, it still didn't work! I can't get it hidden on desktop!

Any help is greatly appreciated.

Kinjaldavra
Shopify Partner
2302 570 1422

hello @LBmedia 

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

@media only screen and (min-width: 749px) {
#shopify-section-16268988909f0f72b3{
	display: none !important;
}
}

 

LBmedia
Tourist
6 0 2

Hey thanks for the advice, but it didn't work- it's still showing up on Desktop!!

 

Kinjaldavra
Shopify Partner
2302 570 1422

hello @LBmedia 

can you please share a screenshot of where to add code ?

LBmedia
Tourist
6 0 2

Screenshot 2021-07-24 113131.png

 

I've tried every variation possible that I can think of. Nothing is working.

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

@LBmedia it's because one of your media-queries brackets isn't closed properly. You don't need so many media queries. If you're trying to modify CSS it is better to write it in the media-query tag which is already available, rather than create another one. 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
LBmedia
Tourist
6 0 2

THANK YOU!! 

Jacquline
Excursionist
48 0 7

Hey @LBmedia , can you please tell me how you find the section id? I have been looking for hours already with no luck. Would be super grateful!

lbmedia1
Excursionist
35 3 4

Just right click on the section and inspect it! You'll find the id there!  If you need help, send me a link and let me know which section you need and I can get the ID for you! @Jacquline 

Jacquline
Excursionist
48 0 7

Thank you so much!

missjo13
Tourist
15 0 1

@LBmedia if there a way to hide a "custom liquid" section in Dawn on desktop only on a product page?  I want to show a video on a mobile product page only, but not on desktop.

 

Thanks for your help!!

KetanKumar
Shopify Partner
36839 3635 11972

@LBmedia 

sorry but i can't see above code where do you have add this?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing