Hide a Custom Liquid Video from Desktop in Ride Theme

Store Design
, ,

Topic summary

Goal: Hide a custom Liquid video on desktop while keeping it visible on mobile in the Ride theme.

Proposed solution: Use CSS media queries to control visibility by screen size.

  • Add a unique class (e.g., custom-video) to the video element in the Liquid section.
  • Default the video to display on mobile, then hide it on larger screens with a media query: set display: none for @media (min-width: 768px).
  • Place the CSS either in the theme stylesheet or directly in the same Liquid file as the video.

Key technical notes:

  • “Custom Liquid” refers to Shopify’s templating section where custom HTML/CSS can be added.
  • CSS media queries let styles apply conditionally based on viewport width (mobile vs. desktop).

Latest update: Another participant requested the website link to review implementation details.

Status: Guidance provided with specific CSS and implementation steps; awaiting the site URL for further assistance. No confirmed resolution yet.

Summarized with AI on December 15. AI used: gpt-5.
1

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

2

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

3

Hi @offcanvas ,

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