Image height

Store Design

Topic summary

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:

  • Initial CSS code causes proportion distortion issues
  • User reports that deferred-media padding adjustments fill width but break height, resulting in cropped videos
  • Support offers fixed-unit height solutions (e.g., 300px mobile, 400px tablet, 500px desktop) using media queries

Current status:

  • Video height issue remains unresolved with a satisfactory responsive solution
  • Support requests the user provide specific images they want to edit for the image height problem
  • Discussion is ongoing, with support offering to provide additional code based on user requirements
Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi everybody,

I’d like to

  1. Edit the image height

  2. Make the video to fill the container

My url: https://www.miuofficial.com/products/a (password: abc)

Thank you. Have a good day.

Screenshot (2).png
Screenshot (2).png1183×603 262 KB

2

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

1 Like
3

It distorts the proportion :face_without_mouth:

4

Hi @collins276 please add code here again , thank you:
5

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.

6

@collins276 oke I got it, Please add again code here:
1 Like
7

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?

8

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 .

1 Like