How can I make a video display only on desktop and not on mobile?

Store Design

Topic summary

A user seeks to hide a video element on mobile devices while keeping it visible on desktop. Their initial CSS code uses media queries with min-width: 768px for desktop and max-width: 768px for mobile, but the video still appears on mobile.

Solutions offered:

  • Add !important to the display: none rule in the mobile media query to override other styles
  • Reference a video tutorial about showing sections on specific devices
  • Use alternative markup/code (specific code snippet mentioned but not visible in conversation)

The original poster confirmed one solution worked. A follow-up question asks about the reverse scenario: displaying video on mobile only, not desktop. This remains unanswered.

Status: Initial issue resolved; new related question pending response.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
4

Hi @Zetterman

Try the video tutorial below to only show certain section on specific device.