Image Stretching When Changing Screen Sizes

Design help Layout & Design
1

Hi, I’m still figuring out Webflow so I’m not sure if I have the right settings for everything, but my image and text box keeps changing size when I go from the design page to the preview page, and when I try viewing my site on different screen sizes/devices, the image keeps stretching. I also have some text on the side and it disappears when I’m on a smaller screen. Should I be using different sizing and spacing to fix this?

https://preview.webflow.com/preview/amandas-portfolio-5ed93c?utm_medium=preview_link&utm_source=designer&utm_content=amandas-portfolio-5ed93c&preview=074278d6a54364ab69784d34059deeb3&workflow=preview

Thank you!

2

Hi Zixin Yu,

With the instance of your hand/phone image, the quickest solution is
Size : Fit=Contain.

Few extra steps you can take, which will offer a bit more control when creating the mobile layouts for this section:

  1. Rather than applying the “Absolute” property to your image, instead add the absolute property to a div that holds the image. This will give you more options for alignment.
  2. For the text in the lower right corner, I would remove all of the margin properties you’ve applied to achieve this location. Instead, assign the “Absolute” position to the text and select the bottom right alignment. Then give the text block a fixed pixel width (around 200px) or some % width that matches the spacing you’re after. You can then use a little bit of right and bottom margin to make the text sit exactly where desired.

In the future: be wary of using large amount of padding/margin on element to achieve a design. There’s usually a better way to set things up… ways that will be more helpful when designing the mobile layouts.

1 Like
3

Hi Port_of_Folio, thank you for helping me again!! I tried changing the size to Fit=Contain and applied the Absolute property to a div instead, which solves the issue of the image getting squished, but now the image is floating instead of being stuck to the bottom of the section like I wanted. Is there any way to fix this?

Thank you again for your help and advice, I really appreciate it!

4

Looking good.
With this arrangement, you’ll now set your image to fit=cover

1 Like
5

It works perfectly now, thank you so so much for all your help! You’re a life saver :sob: :pray: :two_hearts: