Browser testing Android OS, why does text overlap?

nellipope

nellipope

Member
I am completely new to the web building process so please go easy on me.

A friend urged me to build a website for her business, how could I refuse? So I build it to her specifications and launched it. It works great on desktop browsers. I built it using a fixed width so it would display relatively well on tablets and mobiles too. And certainly up until recently I thought it did, then someone with a Motorola (Android OS) got in contact and sent me some screen shots; the text displays at odd sizes and seems to be overlapping.

Being a newbie it's going to take me the rest of my natural life to work out the issue, by which time all the knowledge I will have gained will be obsolete and we will be riding around with rocket packs. So any advice would be gratefully received. I am also rather confused as to why I didn't pick this issue up when browser testing? Admittedly I can't have all the possible combinations of browsers and devices at my disposal, I used BrowserStack to test it and I can't find the issue even when using the Motorola/Android combination?

Anway the url is Yoga Shak | enter (I am not posting this so you guys do all the testing, you have enough problems developing your own websites)

The offending screen shot:
classes.jpg

It was built using Adobe Muse, would it be wise to configure a mobile version instead of relying on the desktop version?

Go easy on me ;-)
 
I get bad display issues on my HTC One on most of the pages. If you take the home page for instance for some reason Muse has seen fit to use a min-height of 347px on the containing content area (by the way - all those non-descript IDs and classes make Muse code really hard to read) which sets alarm bells ringing for me.

What should happen with a page of HTML is that the block content (including headers and paragraphs) push down on one another as part of the natural page flow and so any increase in text size will be accommodated (Google 'the CSS box model').

A lot of mobile web browsers subtly increase text sizes to make it easier to read the words on non-responsive sites. If your page doesn't flow correctly the increase in text size causes the text to over-lap rather than 'pushing down' on the text below it to keep the same amount of gap.

The content should then push down on the footer and so on meaning that, whatever happens to your page during the browser rendering process, it all works together to retain a readable layout.

There have always been these kind of issues with WYSIWYG website builders; Dreamweaver, FrontPage, iWeb and so on. I guess Muse goes in the same category.
 
Many thanks Corrosive. You're absolutely right, all pages appear to load incorrectly when viewed on Android device. I was unaware that some mobile web browsers increase font size, this makes perfect sense and would answer the issue. And yes as you are probably aware Muse sites are not responsive so I can see the problem all to clearly now, thanks to your response. Although Muse does not allow you to create responsive designs, it will allow you to create a mobile and tablet version of each site, hopefully this will fix this issue. Thanks again.
 
You must log in or register to reply here.
Back
Top