Streaming live at 10am (PST)

How to size images when you reduce the reduce the height of the screen?

How to manage the size of the images and text when I reduce the size of the screen. So, the website looks good on 1440900 resolution but when I change the resolution to 1280800 it goes completely crazy.

Please tell me what to do?


Here is my site Read-Only: https://preview.webflow.com/preview/jain-pathway?utm_medium=preview_link&utm_source=designer&utm_content=jain-pathway&preview=1447e13edc31e469129fe1cb1fdcecab&mode=preview

Can you include a screenshot of the issue your noticing?

I took a quick peek at your site and I don’t notice anything crazy—the images are on the large side but don’t look ridiculous (in my opinon).

There are lots of ways you can go about making sure your images scale well across breakpoints, including adding some of the larger sizes to get more granular control over the larger end of your “base” breakpoint:

image

Hey @mikeyevin!

So, when I reduce the height, it gets all cramped up. I tried using “overflow hidden” on the section but then it was hiding the content. Is there any way I can adjust the elements inside the section so that they adjust according to the height as they do for the width?

Btw here is the screenshot

Ah okay, you’re always able to use VH units to control image size and then use the min/max styles to prevent the image from getting too small/large.

Not sure how you’d like it to look for these types of screens, although the changes above should help get you closer—that said, this ratio isn’t all that common so it probably won’t affect a large percentage of users.

Ohhh, i see. Thanks for the help. Let me try using VH units then :smile:

Normally I use the compress tool which made by PDF Insider. And I do not face any type of problem…