Make custom content only visible on mobile.

ZachP1
Tourist
4 0 0

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 

0 Likes
JHKCreate
Shopify Partner
2538 417 603

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!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
- Learn more about us: jhkcreate.com

0 Likes
ZachP1
Tourist
4 0 0

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.

0 Likes
ZachP1
Tourist
4 0 0

@JHKCreate Whoops I forgot to tag you.

0 Likes
suyash1
Shopify Partner
2885 308 476

@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;}
}

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
ZachP1
Tourist
4 0 0

@suyash1 @JHKCreate 

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

0 Likes