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 

Replies 5 (5)

JHKCreate
Shopify Expert
3571 639 916

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
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.

ZachP1
Tourist
4 0 0

@JHKCreate Whoops I forgot to tag you.

suyash1
Shopify Partner
9033 1123 1482

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

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
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.