Default Mobile Width Too Wide In Safari On iOS

Ask the community
, , ,
1

The default width of my site when rendered on mobile renders too wide for my device in the default browser (Safari on iOS). The site works perfectly in Firefox on iOS.

Question:
How can I adjust the width of my site when viewing on mobile vs. desktop?

Product:
I am designing/editing in Wix Studio on my desktop and testing on desktop and iPhone 14.

What are you trying to achieve:
I need my site to render to the correct 100% wide width in the default browsers on mobile devices.

What have you already tried:
I have checked element widths and they are all 390 or below. The site looks correct in Wix Studio in the Mobile rendered view and works in Firefox on my iPhone. Does not work on Safari or Brave browsers on iPhone.

2

Do you mean when published, it looks different in safari than the wix preview or the wix preview is different among browsers? share pix please!

3

Thanks for the reply. It looks great in the Wix editor on my computer in both Firefox and Safari.
The published site also renders great on my iPhone 14 Pro in Firefox

But on my iPhone in Safari (the default browser), the pages are too wide such that the content is cut off and the hamburger menu isn’t visible unless I scroll horizontally right. This isn’t an acceptable user experience.

Wix Mobile - Safari
Wix Mobile - Safari589×1278 346 KB

I am on a very tight timeline so I may have to work around the issue by just moving the menu so that it’s visible on the left. But I would much prefer the issue be resolved properly.

Thanks!

(The forum is only allowing me to post 1 image)

4

  1. The forum is allowing you to post just one image, beacause surely you are a new forum-user, who is not very active. This will change the more active you will get inside the forum.

  2. To solve your issue → ypu will need to generate some code, which would regulate the differences between different browsers and different resolutions.

It is known that wix has difficulties if it comes to mobile version.

5

Thanks for the tips. Adding device selectors is unfortunate to have to do. I ended up moving the hamburger menu to the left so at least it’s visible if/when content is cut off on the right in Safari. I may revisit this to try to fix it more elegantly given Safari is what most iPhone users will be using with it. Thanks again!