images squashed

Hi Garry,

Thanks for the screenshot and the link, that made it easy to find.

On your page each image is inside a column that is about 480px wide, so the image can’t be 1000px wide there. The width shrinks to fit the column, but the height is set to a fixed 563px, so the image gets squashed.

The fix is to set the height in percent instead of pixels. Then the height always follows the width and the image keeps its shape at any size:

1. Open each style in Image Hover Effects and go to the Width & Height section.
2. Next to Height, click “%” instead of “PX”.
3. Enter 56 (563 ÷ 1000 = 56.3%, which keeps your 1000 × 563 shape).
4. Click Save.

I tested this on your page and each image then shows at 480 × 269, the same shape as your original.

One more tip: your Columns block is set not to stack on mobile, so on a phone each image is only about 130px wide. To make them full width on phones, select the Columns block in the editor and turn on “Stack on mobile” in its settings.

Let us know if that sorts it out.

Best regards,
Richard
Oxilab Team