Fixed width instagram code causing issue in iPhone 6 view

Design help General
1

Hey guys!

So according to my site settings, the layout for my mobile design for my site should be fine for iPhone 6. Everything is set to auto, so technically it should adapt.

However when I checked the site on my friends iPhone 6 plus it looked like this:

720Ă—1280 369 KB

Buckets of white space to the right, which is obviously not right.

Site preview is here: https://preview.webflow.com/preview/newinstyle?preview=2d46b0a1c15975f909ecb86682cc5086

Any ideas / suggestions would be great. It seems to work fine with all other devices, so am stumped as to why this isn’t behaving.

Thanks so much!

2

Hey @RKelsey. It looks like you’ve got some of your sections set to a width of 321px on mobile portrait. Try changing your widths for these to 100%, and they should adapt to any screen size.

237Ă—628 20.7 KB

3

Thanks Jordan - I"ve changed the remaining setting to 100% (The one above wasn’t set to show on mobile, so i didn’t bother changing it before) but I’m still having the same issue…

Is there anything else that could be affecting it?

4

Could you update your read-only link? It’s not working.

5

Hi @RKelsey,

Such issues usually happen when some elements moved to right side out of screen width or having width bigger than screen width.

Unfortunately, you read-only link doesn’t work now and I can’t tell more detailed what can be wrong there

Regards,
Anna

6

Hey

Not sure why the preview link isn’t working. Let me know if this does the trick:

https://preview.webflow.com/preview/newinstyle?preview=eae1fc1e13e74295348f67c54d823783

7

Yes I’m having the same problem now on an iphone. My background is tiling (I can tell its tiling because I have a radiant set to it yet I have no tiling on), only on the phone, you can’t see it happening in webflow so hard to know how to fix it. But because its tiling it pushes everything to the left just as you are seeing. If you double-tap on the phones screen it displays correctly. What makes it weirder is the body class is identical on all my pages but the problem only appears on one page of the site. This page has an image (width set to auto) and text on it and the iphone asks if you want to go to the text reader. Don’t know if that has something to do with it. But its the same problem I can see in your images. Confused.

8

I found the reason, it is embeded Instagram widget, which has width: 690px by default

862Ă—257 12.9 KB

2 ways to fix it:

  1. Change it to width: 100%
    or
  2. set “instagram container” overflow: hidden

Regards,
Anna

9

@spheres, if you will post your read-only link we could take a look on your project and try to help you.

10

Can you tell me how to execute option 2: set “instagram container” overflow: hidden

Hope it works, thanks!

11

243Ă—663 25.2 KB

12

Thanks so much, I won’t be able to see if its worked until my friend checks on his phone, mine went bust a few days ago, but I hold out much hope!

I’ll let you know!

13

Worked like a charm! Thanks so much Sabanna!

2 Likes
14

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