As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the right side. This causes the whole site to look good, but you can scroll "out of the website".
My initial attempt to prevent horizontal scrolling was by adding this line:
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
To eliminate the still scrollable space on the right, I included this in my "mobile.css": Though it worked on the computer, it did not have the desired effect on my mobile device.
body{
width: 100%;
overflow-x: hidden;
}
- You can access my website here: my mobile website
- The link to my mobile.css file is located here: my "mobile.css"
I have tested the website on various mobile browsers including:
- Google Chrome
- Dolphin
- The default Android browser
Initially, I wanted to avoid using Javascript, but if there is a javascript solution available, please feel free to share it!