Video not playing in mobile mode for Dawn Theme

Technical Q&A
,
1

Hi,

I tried editing the CSS code to fit the video on the mobile screen as the video does not appear in mobile but appears only on desktop.

I am using Dawn template.

I tried this in the base.css file

@media (max-width:500px) {
.video-with-text__media {
padding-top: 100%;
width: 100%;
}
}

DId not work still.

Pls help soon

2

@anubee123 this worked for me.

  1. Create a backup:
  • Go to Online Store > Themes > Edit Code - Navigate to Snippets folder - Click “+ Add a new snippet”
  • Name it product-thumbnail-backup.liquid
  • Copy ALL content from product-thumbnail.liquid.
  • Paste into the new backup file
  • Save the backup file
  1. Update the original file:
  • Go back to product-thumbnail.liquid
  • Replace all content with the new code
  • Save changes
  1. Add required CSS:
  • Open Sections folder, find main-product.liquid
  • Add the new styles at the top of the file
  • Save changes
  1. If anything goes wrong:
  • Simply copy content from product-thumbnail-backup.liquid
  • Paste back into product-thumbnail.liquid
  • Save to restore previous version

Style for main-product.liquid

Changes to product-thumbnail.liquid


  {%- comment -%}
    Custom video implementation:
    - Replaced deferred-media with direct video element for better mobile/desktop consistency
    - Added autoplay, muted, and loop for background-video-like behavior
    - Wrapped in deferred-media div to maintain styling/layout
    - Removed controls for cleaner look
  {%- endcomment -%}
    {%- if media.media_type == 'video' -%}
    

      
    

  {%- else -%}
  
  {%- endif -%}