Hide a Custom Liquid Video from Desktop in Ride Theme

[offcanvas]

Looking for a code to hide a video on desktop and make only visible on mobile, thank you!

[PageFly-Amelia]

Hi @offcanvas ,

This is Amelia from PageFly - a Landing Page Builder App,

To hide a custom Liquid video from the desktop view in the Ride theme, you can use CSS media queries to control the visibility of the video based on the screen size.

Here are the steps to achieve this:

1. Locate the Custom Liquid Section: Find the section in your theme where the video is embedded. This might be in a custom Liquid file or directly in a template file.

2. Add a CSS Class to the Video: Add a unique class to the video element to target it specifically.

   <video class="custom-video" muted autoplay playsinline loop>
       <source src="your-video-url.mp4" type="video/mp4">
   </video>

3. Add CSS to Hide the Video on Desktop: Use CSS media queries to hide the video on larger screens (desktop) and show it on smaller screens (mobile).

   <style>
       .custom-video {
           display: block; /* Default display */
       }
   
       @media (min-width: 768px) {
           .custom-video {
               display: none; /* Hide on desktop */
           }
       }
   </style>

4. Include the CSS in Your Theme: Add the CSS to your theme’s stylesheet or directly in the Liquid file where the video is embedded.

   <style>
       .custom-video {
           display: block; /* Default display */
       }
   
       @media (min-width: 768px) {
           .custom-video {
               display: none; /* Hide on desktop */
           }
       }
   </style>

I hope that my solution works for you.

Best regards,

Amelia | PageFly

[namphan]

Hi @offcanvas,

Please send the website link, I will check it for you