CSS problem on Palo Alto

[MaxCosta]

I'm encountering a CSS problem on the Palo Alto theme.

The “Video” section doesn't allow me to define a specific video on mobile and desktop.

Site : https://b7j5376yqiuk7nhf-55480549543.shopifypreview.com

So I duplicated the Video section, masked the 1st one on mobile with this code (and it works):

@media (max-width: 768px) {
#FeaturedVideo--template--22525296509256__section_video_GT7wkw {
display: none;
}

So the first section of my site is visible on desktop and hidden on mobile.

Then I create the second section and try to hide it on desktop, but it doesn't work!

I put this code

@media (min-width: 768x) {
#FeaturedVideo--template--22525296509256__section_video_fNi4Br {
display: none !important;
visibility: hidden !important;
}

And it doesn't work...

Does anyone have a solution to hide the video section of my home page, only on desktop, and leave it visible on mobile?

Thanks in advance for your help,

[B2Bridge]

Hi @MaxCosta, can you share us your store url?

[MaxCosta]

https://3j8bejqedc1c0pnn-55480549543.shopifypreview.com

thank you !

[LizHoang]

Hi @MaxCosta 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

@media (min-width: 768px) {
div#shopify-section-template--22525296509256__section_video_fNi4Br {
    display: none !important;
}
}

Result 

Best,

Liz

[MaxCosta]

I did it but it doesn't work 😞

[B2Bridge]

Hi @MaxCosta, you can follow these steps:

Step 1: Open Online Store -> Themes -> Edit code

Step 2: Find the theme.css file

Step 3: Paste this code at the bottom of the file

@media (min-width: 768px) {
#shopify-section-template--22525296509256__section_video_fNi4Br,
#shopify-section-template--22525296509256__section_video_GT7wkw {
  display: none !important;
}
}  

 If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 😍

[MaxCosta]

It doesn't work.. 😞 I can't understand why