Mobile Web page looks different on different mobile devices

Hey guys,

Any ideas? I have a a couple of pages on my website that places elements in different places on different mobile devices. For example the position of a piece of text is in a different spot, and is over lapping other text, when i view it on a Samsung S20, however the page displays correctly when viewing on an iPhone 8. I’ve attached a screen shot.

Advice would be grateful, thanks!

Ben

This may have something to do with the resolution of the Samsung and iPhone displays being different - thereby, one will be loading a different version of the site than the other. The iPhone display is 750 x 1334, whereas the S20 is 1440 x 3200. I would make sure that you create pages for all devices - don’t leave any out. The S20 may be looking for a tablet layout. If you haven’t created one, it may default to the next size up. I could be wrong, but it’s worth ensuring all device layouts are included.

Thanks for your reply. I have the site built for all devices. Most pages seem to work and look the same across all devices. I just have 2 that don’t for some reason and can’t figure out why.

@editor1593, Just make sure you font style used is “web font”. The Samsung screenshot is using a different font-size. Also from what I can see your text tracking is way to bunched up…

Thanks for your reply. I am using a ‘web-font’. Yes I see the Samsung is using a different sized font, which is also what I don’t understand, why when viewing the same page on two difference devices are the fonts sizes and text placement different.

Oh I’ve changed the tracking and I’m now using a smaller font to keep each entry on one line. Nice tip.

My guess is this is the chrome text zoom, we have a fix for this but I’d say it’s best if you check with Sparkle 3 tomorrow.

1 Like