How to hide custom liquid for mobile view? (dawn)

Store Design
, ,

Topic summary

A user successfully added a custom liquid video banner to their Shopify homepage using the Dawn theme but needs to hide it on mobile devices due to aspect ratio issues (the video isn’t optimized for mobile dimensions like 1080x1920).

Technical Details:

  • Custom liquid code includes a video element with autoplay, loop, inline, and muted attributes
  • CSS styling sets the video to 100% width, 50% height, with centered display
  • Code was added directly in the Shopify web editor, not within the section’s code editor itself

Current Status:

  • The discussion remains open with no solution provided yet
  • Another user requested the website link, likely to provide specific troubleshooting assistance
  • The core question about implementing mobile-specific visibility controls is unanswered
Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

I’ve managed to add a custom liquid video banner onto my shopify homepage and it looks great, but I’m trying to make it hidden on mobile view because the aspect ratio isn’t 1080x1920 so it doesn’t fit correctly. Is there anyway I can do this? Any help would be appreciated, thanks.

Here’s how the code looks →

  3. video {

  5. display: block;

  6. margin: 0 auto;

  7. width: 100%;

  8. height: 50%;

  10. }

(Btw I haven’t added this code within the edit code section itself. I’ve done it within the actual shopify web editor!)

2

What’s the link to your website? Thanks!