Pillarboxed image?

Any idea what might be causing this? It’s a reusable element…

Thanks in advance!

It looks like the actual view is narrower than the design view so the picture element is getting squashed to fit. So to fix the picture issue, place two invisible shapes at each side of the picture and set their minimum responsive size to 0. they will adjust to suit and keep you picture a better size, i.e. act as you margin buffers.

I have been using this approach more and more when i stumble across responsive issues.

1 Like

I see the minimum width % is set to 0 - something seems to be forcing this very narrow view.

Try bumping up the minimum width. Or, especially with smaller images (profile avatars, product peek views etc) it’s sometimes better to make a firm decision on what size you want the image to display across all viewports and set the element to fixed width.

Keep in mind by setting a minimum width, you’ll probably want to Keep element proportions as the page is resized.

1 Like