I want the website to display videos in different sizes for mobile, desktop, and tablet.
Is this possible for Dawn through theme editor somehow?
Currently, the videos are either too large on desktop or too small on mobile.
Videos are posted on pages by a custom liquid section.
Example of custom liquid:
video { display: block; margin: 0 auto; width: 80%; height: 50%; }I appreciate any help or feedback, thank you.
HI JC671,
It’s possible to instruct browsers to render video elements in different sizes for Dawn (or other themes) by using media queries to set up rules for specific screen sizes. With media queries you can use the max-width CSS property to target devices with screens smaller than a certain width. Since your videos are being included in the custom liquid section, you can add media queries to the existing CSS, so it would look something like:
The properties for tablet/ mobile max-widths are just placeholders and you can change them to work as you’d like. You’ll also need to test the video display on different devices or use browser developer tools to simulate different screen sizes.
Hope this helps!
Thank you so much! That solution works.
For anyone who had the same issues, please see Liams response.
For my site, this is what the custom liquid looks like now:
tags:
Responsive video in Dawn theme
How to resize videos in Dawn theme
Resize video for desktop and mobile screens
Shopify custom liquid video size