Mobile web design, it can be frustrating.
My friends at Apollis Health and Training contacted me two weeks ago. They asked if I could have a look at their new website and fix an issue with it not displaying correctly on mobile. Since they helped me with my shoulder when I was injured, I said no problem.
They use WordPress for their website. The theme they use says it will display correctly on mobile. But it doesn’t and to fix it requires finding and editing the code that is misbehaving.
The website looked great on a PC, but when you looked at it on a mobile the content part of the web page had disappeared. As you can see from the picture, the header and footer are visible, but only a small part of the content appears.
When investigating a problem with a webpage, I like to use google chrome. Simply open the web page in google chrome. Right click anywhere on the website and click inspect element.
It will open up a window with the code of the page you are viewing. The first thing you want to do is click on the little phone/device icon up the top right. Once clicked you will then be able to choose the device resolution you want to check. I choose iPhone 6.
It will give you a warning message to reload the page. So click reload(refresh). It should now show you what you would see on your mobile device. In my case the issue with no content appeared. I investigated the code. Specifically I looked at the div element that held the content. It’s the CSS controls the look of a web page, so I checked the CSS.
After studying the code, the first thing I saw was “overflow: hidden;”. In simple terms this makes any content outside of the div area disappear. So I unchecked the box next to the code. This just edits it for the webpage you currently viewing locally. So if it breaks the site all I have to do is just reload the page. If it fixes the site I need to make it permanent in the CSS on the webserver.
After the change I could see the content, but it was behind the footer. I realized I needed to find the code that controlled the size of the content div. Further inspection of the code revealed two lines of interest. “height: 0;” First this set the height of the content area to 0. It would explain why it’s not appearing. But not why it looks fine on a desktop. The second is “padding-top: 56.25%;”. It is saying increase the bottom of the content area by 56.23%. The combined code forces the content area to keep a 16×9 content area. Which was good for the desktop, but with the portrait screen of the phone it doesn’t leave enough area for the content to be displayed.
So I removed both pieces of code. I now needed to add code for the correct size of the div. This needed to work no matter how much or how little content was contained. I first tried “height: 100%”. Meaning content height size is 100% of the content. It worked on the desktop I was using, however when I checked on my phone it didn’t. This is a frustrating issue as different devices read code differently.
After some head scratching I tried “min-height: 100%”. This did the trick. Now that I knew what code should be removed and what code should be added. I went to the CCS style sheet on the webserver and changed the code permanently. I removed “overflow: hidden;”, “height: 0;” and “padding-top: 56.25%;” and added “min-height: 100%”.
Check out the fixed website at www.apollis.com.au.