Hi everybody,
I’d like to
-
Edit the image height
-
Make the video to fill the container
My url: https://www.miuofficial.com/products/a (password: abc)
Thank you. Have a good day.
A user seeks help adjusting image heights and making videos fill their container on a Shopify store. A PageFly support representative provides CSS code solutions to modify video width and height.
Key developments:
deferred-media padding adjustments fill width but break height, resulting in cropped videosCurrent status:
Hi everybody,
I’d like to
Edit the image height
Make the video to fill the container
My url: https://www.miuofficial.com/products/a (password: abc)
Thank you. Have a good day.
This is Noah from PageFly - Shopify Page Builder App
Please add code here to change width image video:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
It distorts the proportion ![]()
Hi @collins276 please add code here again , thank you:
In fact I’ve tried this code before, the same result as yours.
deferred-media {
padding-top: var(--ratio-percent);
}
It fills the width but breaks the height. Is there any other way? I’m fine with the video height being cropped.
@collins276 oke I got it, Please add again code here:
Thank you! But fixed units may causes some problems. Ok, forget the video. Can you help me out with the images height? How can I edit them?
Hi @collins276 Iam sorry for delay. About height video. if you want set height for each screen , ex: with screen mobile height: 300px, with tablet height: 400px, with desktop height: 500px, If you want i can provide code help you.
And you want edit height image, You can provide me image you want edit. I need check and consider we have edit it by code or option feature of theme .