Hello,
You can add below code above in theme.liquid
online store >> edit code >> theme.liquid
after added code
if our solution is helpful for you then please like the post and tap on accepted.
Thankyou
Topic summary
A user wants to reduce the size of a video section on desktop while keeping the mobile size unchanged. The video appears too large on desktop screens.
Initial Solutions Attempted:
- Multiple helpers provided CSS code to be added above the
</body>tag intheme.liquid - Early code versions caused centering issues and the video shifted right when played
Working Solution:
After several iterations, a CSS media query approach was provided that:
- Sets the video width to 50% on desktop (screens wider than 768px)
- Maintains 100% width on mobile
- Keeps the video centered during playback
- Uses
max-widthandmargin: 0 autofor proper alignment
Current Status:
The original poster confirmed the solution worked. However, later commenters reported the code still doesn’t work for them, particularly with the “Spotlight” template, indicating the solution may not be universally applicable across different Shopify themes.
Note: One commenter criticized the quality and clarity of solutions being offered in these types of threads.