Enlarging and Centering Image Block

Hello —

I have a portfolio site where I’m using image blocks to display my work. On some images, I’d like to enlarge them on mobile so elements in the photo can be viewed at a larger size. I have my images set as block and around 120-150% on mobile and that works fine. However, I can’t seem to figure out how to horizontally center the images. They continually stay anchored to the left side even when setting the left/right margins to Auto and using the square “centering” button under the Spacing menu.

The only work-around I’ve come up with is to place the image inside a section, set the image’s opacity to 0 and then control the enlargement and centering by setting the same image as a background to the section. This method seems a bit extreme just to get an image enlarged and centered.

Any help would be greatly appreciated, I feel like I’m just overlooking something small…


Here is my site Read-Only: https://preview.webflow.com/preview/robertsondesign?utm_medium=preview_link&utm_source=designer&utm_content=robertsondesign&preview=75045478fca4dd4ef1aa60405f05a8e9&pageId=5d41bb43eee5233f6c038de0&mode=preview

Stunning site! :slight_smile:

I would suggest if you make the image 120% then set Position to Relative and Move it 10% left. So it will be centered. If you set the image to 140% then Move it 20% left, and so on…

Good luck

1 Like

@Eli11 That did the trick! Thanks for your help and the compliment!