▼
Streaming live at 10am (PST)

Difference between iPhone and Samsung

Design help General
#1

I simply cannot get this site to work correctly for Iphones and Galaxies. Check out the Meet the Team section - on the iPhone, five images are divided correctly between two rows with 3 on top and 2 below using a flexbox, on the Galaxy there is a row of five, extending out beyond the screen edge.

Some other weird behaviour happens on the Galaxy when you click on an image too.

I was tempted to categorise this as a bug, but maybe I have got something wrong…

Here is my public share link: https://preview.webflow.com/preview/awareness?preview=ba6935708d8587d332582116bad98af8
Website: http://awareness.webflow.io/

#2

Hello, @Hywel

It is hard to tell what exactly cause this issue on Galaxy :confused: Try to set “team div” width=100% and check if it will change anything.

Regards,
Anna

#3

Thanks Anna, I’ll try that.

#4

No joy, still produces five images in an extended row on the Galaxy…:confounded:

#5

can you provide screenshots?

#6

It’s annoying; everyone I know owns an iPhone! I have asked a friend to send me an image, I’ll upload shortly.

#7

:frowning: … Wish I could correctly simulate Samsung Galaxy in the browser and check the code. (Current Chrome developing mode shows site correctly in Samsung Galaxy simulation). All this sounds like Galaxy doesn’t respect flexbox settings.

Probably you will have to make all team members links in-line block and team member block just display: block with text-align: center.

#8

Yes, I use the excellent Blisk browser for testing mobile views, but it shows it incorrectly - ie the Galaxy image is not what you see in real life.

#9

Hi @Hywel, Here is a screenshot of galaxy S6, is it supposed to look different?

What exact galaxy model you have?

#10

No, that’s spot on, but on two separate Galaxy models it shows like the image below. I believe they are both S2s.

Galaxy Screenshot.png720×1280 417 KB

#11

Hi @Hywel, I have been able to observe the issue on the S2. I was doing a little research on android 2.3, which the version running on S2 and found this: https://benfrain.com/flexbox-gotchas-for-android-2-1-4-3-stock-browser/

It might be that to get compatibility with the lower versions of android, some other styling will be needed, other than flexbox.

1 Like
#12

Well found, Dave. There’s a lot of early Androids about, I’ll switch to columns I guess.

#13

Speaking of flexbox Dave, can you elaborate on what versions of IE works with flexbox? I heard that only MS Edge currently supports flexbox, is that true? My sight still has plenty of 1024 px wide visitors who I assume are using older browsers. A list would be nice of which versions are supported. Thanks!

#14

Hi @Bghead8che, here is a reliable source: http://caniuse.com/#feat=flexbox.

From the list, edge 13 and 14 should be good, IE 11 will have partial support.

I hope this helps!

#15

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