Make custom content only visible on mobile

Store Design
1

Hello,

I need help with making a custom video on my website only visible on mobile for Debut Theme. It looks stretched on desktop, and I have made a slideshow to replace it on desktop. I figured out how to make the slideshow only visible on desktop with a @media max-width code, but I can’t seem to make min-width work for the video to only show on mobile.

My website is cozykicksofficial.com

2

Hi @ZachP1

Add the following code to see:

@media only screen and (min-width: 750px)
{
.section--image.fade-in-child.preventOverflow.use_image.palette--contrast--dark {
    display: none!important;
}
}

Let me know if that works!

3

The video still shows on desktop so it did not work. I put the code in the theme.css where I put the code to make the slideshow only show on mobile. Could this be the problem? I also can send the index-mp4.liquid for the video if this would help.

4

@JHKCreate Whoops I forgot to tag you.

5

@ZachP1 - please add following css to the very end of your theme.css file and check

@media screen and (min-width:750px){
#shopify-section-161129468780f264ad{display: none;    visibility: hidden;}
}
6

@suyash1 @JHKCreate

Still did not work. Copied the code just as you had it and put it in the theme.css and saved.