Icon Wrapper too large, can't adjust size?

Hello,

I am new to Webflow so I’m sorry if this is a silly question.

Please see below, I would like the “signature services” icon wrappers to be all the same size. The images are all different sizes. How can i make them the same size like the preventative picture?

Any help would be kindly appreciated. :slight_smile:

https://preview.webflow.com/preview/seaside-smiles-mockup-option-2?utm_medium=preview_link&utm_source=designer&utm_content=seaside-smiles-mockup-option-2&preview=7b6b89eb1f77545793a6be22eb205406&workflow=preview

The ideal way to handle this is outside of Webflow.
In Photoshop/Pixlr, create a square canvas template (say 1000x1000px) then position/scale each icon inside of this square canvas. This will keep the image size the same for all icons and you’re controlling the proportion before going into Webflow.

There is a way to do it in Webflow, but as you can see the teeth image has a lot of blank area above and below the actual line art. So each image will need a unique class to control the sizes.

I completely agree with Port of Folio.

You can get closer to your goal by setting a fixed width and height for your Big Icon class, e.g. 180px x 180px. You already have the fit set to cover, centered, so the edges will be cropped.

However because of the different amount of padding in the images, it won’t look right. The tooth is the outlier.

Thank you so much.

What would you recommend to control the sizes. I am stil learning and i’m just happy i’m getting somewhere!

-Jennifer

Many ways to handle it. I prefer to use minimal styling when possible. I’ve attached two screen grabs. I’m using the single tooth icon to represent all icons since it’s a perfect square image. (Imagine the other two icons being inside of the same 512x512px png format)

  1. I’m controlling the size and position of the icon using properties from the “grey icon wrapper” element. Applied 50px of padding on all sides. Added 25px margin on the bottom.

  1. I have no styles applied to the image itself. I’ve kept HiDPI checked.

So i did all that but the images are too small even though they are the same size from Pixlr?


Hi Jennifer,
The share link from your original post is no longer working for me. Possible to check if sharing is still enabled and then reshare the link?

Of course,

https://preview.webflow.com/preview/seaside-smiles-mockup-option-2?utm_medium=preview_link&utm_source=designer&utm_content=seaside-smiles-mockup-option-2&preview=7b6b89eb1f77545793a6be22eb205406&workflow=preview

Looks correct. You just need to make an adjustment in Pixlr.