Some of the spacing and fonts in my mobile layout is not appearing the same on the published site on iPhone, as it is in the mobile editor. My other breakpoints seems to look ok. Why might this be?
The default mobile breakpoint is 320-720px. Not all mobiles are the same and some newer models go up to 930px. To be able to have the closest resemblance to the editor on all mobiles you need to make sure you stack elements together and use padding on sections. It also helps to set sizes to % not px.
Thanks. This might account for the spacing discrepancies. It doesn’t account for the font differences though?
I tried your above recommendations but it doesnt seem to have worked. There are still large spacing discrepancies between the mobile editor and the published site on iphone 13. Everything is set to Scale Proportionally & docked correctly so there shouldnt be this many issues. Also, the green “03” numbe rfont is displaying heavier on the published site as it looks in the editor. See red arrows on image below.
As you can see, in the “Join our waiting list” section at the bottom of the screen everything is spaced accurately. So dont know why having these spacing issues in some sections of the site and not in others. Also no such discrepancies in the desktop breakpoint.
Does anyone have a solution or workaround for this? If not im going to have to leave Wix studio for Framer. Im just running into too many bugs & quirks with the platform and now I cant seem to get my site published because of this latest issue.
do you have a link to the site and I can check on some different mobiles ?
Yes https://www.listlessapp.com/
The 3rd feature section (shown in the screenshot above), as a ‘workaround’ I have now increased the spacing between the element, to get it to look right on my iPhone 13. Presumably this spacing will now look even worse on larger devices though?
