Am Using Custom Liquid to Display Video. How to Edit to ONLY show on mobile

Store Design

Topic summary

A user needed help modifying custom liquid code for displaying video in Shopify’s Dawn theme. The video was working on mobile but they wanted it hidden on desktop.

Original Issue:

  • Custom liquid video code displayed on both mobile and desktop
  • Goal was mobile-only visibility

Resolution:

  • User resolved the issue independently before receiving detailed assistance
  • Another user offered to help by reviewing the store URL, but this became unnecessary

Status: Resolved - the user successfully edited the CSS media queries to hide the video on desktop screens while maintaining mobile display.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Hey all, found this code for a custom liquid video display on ‘Dawn’ theme - works perfectly on mobile but would like it hidden on desktop monitors. How do I edit the below code to adjust? Thanks!

video { width: 100%; height: auto; display: block; margin: 0 auto; }

EDIT: Solved, thanks!

Fix:

@media (max-width: 767px) { video { width: 100%; height: auto; display: block; margin: 0 auto; } } @media (min-width: 768px) { video { display: none; } }
2

@mochi93 , Could you please share your store URL? so can check and guide you accordingly.

3

ALL sorted, thanks :slightly_smiling_face:

1 Like