Image not showing as circle in iOS but is in browser

I’m trying to display an image as a circle, which is working correctly when viewing via a web browser but isn’t a circle in the native app. Any idea why this is the case and what I can do to rectify? Settings are as follows:

Preview from browser:

Actual app:

Hi all, just bumping this again. Anyone have any ideas what I can do to fix?

Is that the “actual app” or the app preview on your phone that you’re viewing via the QR code? If so maybe it will display correctly when you push it to Android/iOS.

The only thing I could think is the problem is the way browser CSS is behaving on your device due to its screen size.

Just a hail mary of a suggestion, may not be the problem.

It’s a screenshot from the actual iOS app on iPhone 13 Pro max

Try putting invisible rectangles around your elements to force no resizing/movement of your circle, see if that helps. The idea is to make the screen believe there is no gaps between each side of the page, so that the elements are “full width”

Allllsooo… Try setting the image element to “Show Full Image (Dont Crop)”. Could also be the solution.

When you click “preview” when building, you’ll see in the top right that you’re building for an iPhone 11 Pro, which is a different screen size. When you view it on your device which is bigger, it’s probably stretching the elements out to cater for the extra screen space.

I hope something here can help you, good luck!

1 Like

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