Image Sizing in Responsive Design

When I set the pixel width of my images at the base point and the different breakpoints, I go back to my base point and the images are reduced to the size of the smallest breakpoint image width. How do I fix this? What am I doing wrong?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Welcome to the community @rhperry!

Are you by chance changing the image dimensions within the Image Settings (shown in the modal that appears when you first add an image or by going to the Settings panel)?

If so, this actually set’s the base width across all breakpoints rather than creating a breakpoint-specific style. To change the size of the image, you’ll want to update the width/height in the Style panel:

Changing them here will create a new class (which you may want to rename) and then any changes on a particular breakpoint will cascade away from the base breakpoint as you’d expect :+1:

Thanks! That helped. Problem solved.

I’m having trouble with certain images on my website that appear distorted on my iPhone (browser is Safari). How do I fix this?

See sample image below.

https://preview.webflow.com/preview/dutch-poet-press?utm_medium=preview_link&utm_source=dashboard&utm_content=dutch-poet-press&preview=40f87a50b0d7489b3e91ef530ed16de6&workflow=preview

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.