Change size of vertical videos for desktop but not mobile...

Illup11
New Member
7 0 0

Right now my vertical videos look perfect on mobile but are way too big on desktop. How can I have them fit to height of the screen for desktop viewers? (there was another similar topic to this, but the code did not work for me)

 

https://www.metamorflotus.com/pages/about

Replies 2 (2)

Emirates7
Shopify Partner
197 44 47

Hi Illup11,

 

Go to Online Stores -> Themes -> Customize -> Theme Settings -> Custom CSS and add below code:

 

@media (min-width: 992px) {
.video-section__media.deferred-media {
--ratio-percent: 70% !important;
}
}

 

1.png

 

Regards,

Emirates7

Wholesalehelper
Explorer
44 11 13

Hello, @Illup11 

Greetings from the Wholesale Helper Support Team! Happy to help you today.

 

1. Go to online store > theme > Edit code > Layout > theme.liquid (file) and Paste the below code at the end of the file, just before the closing " </body>" tag -> Save

<style>
@media (min-width: 992px) {
.video-section deferred-media.video-section__media.deferred-media.no-js-hidden.gradient.global-media-settings.media-fit-cover {
    --ratio-percent: 70%!important;
}
}
</style>


2. After adding the above CSS, it looks like this-

Wholesalehelper_0-1707390355360.png

 

 

Let me know If need further assistance

 

Regards,

Wholesale Helper Support Team

Wholesale helper- Supercharge your Wholesale and B2B business


If you find my reply helpful, please hit Like and Mark as Solution
Connect with us: App Store | Blog | Join our Community | Help Center