Hiding custom html content from mobile devices

Solved
Highlighted
Excursionist
22 1 1

I recently added a couple of background videos using custom html content. but since they won't play on mobile devices. i decided to hide them from mobiles while still showing them on desktop. But I don't know which exactly to modify  

 

this is this the code i applied:

// Header Video CSS

.video-background {
width: 100%;
height: 33%;
left: 33%;
top: 33%;
}

.template-index #shopify-section-1555664398945 .page-width {max-width: initial !important;}
.template-index .main-content{padding-top: 28px;}

@media only screen and (min-width: 750px){

#shopify-section-1551278267809 .section-header {

margin-top: 20px;

}

}
0 Likes
Highlighted

Hello 

 

Use css inside the media query 

@media only screen and (max-width: 425px) {
.class-name{
display:none;
}
}

or else 

 

you can share your web url so that I will let you know the exact css. 

 

 

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
22 1 1

@oscprofessional 

I tried but I couldn't find the section name. 

 https://happyhomefactory.net/

 

there are 13 background videos. i don't know whether to modify them each. or if all of them are under 1 section and i only have to find the section name.

0 Likes
Highlighted

This is an accepted solution.

Use this css:-

@media only screen and (max-width: 425px) {
.template-index .video-background{
display:none;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Excursionist
22 1 1

@oscprofessional 

It worked! thank you for your help dear Pallavi! your effort is so much appreciated.

 

Will other future videos I might add be automatically hidden? or do i have to do something else when I add them. And since the videos are hidden in mobile now. Is there is a way to align the product images to the center only in mobile while keeping the same structure with videos on desktops?

 

0 Likes
Highlighted
New Member
2 0 0

Hello! Can you please help me find where to insert this code? We'd like to hide the video's from mobile but have them available for desktop view. Ideally mobile view would instead display a static image. 

https://raquelallegra.com

0 Likes
Highlighted
New Member
2 0 0

Hello! Would love help finding where to insert this code on our page. Want to hide the video-banner from mobile users. Thank you!

0 Likes