When my website is viewed on mobile browsers, there is tons of white room to the right and bottom of the actual content of the site. I've tried to put overflow-x: hidden on my <body> to turn off the horizontal scrolling, but even that doesn't work. As far as I can see, I also don't have any elements exceeding the bounds of the screen. My site can be found here.
Asked
Active
Viewed 51 times
-4
Isaac Wasserman
- 1,461
- 4
- 19
- 39
-
More details regarding your problem would be helpful in providing answers. – JohnH Nov 06 '16 at 15:56
2 Answers
0
It's caused by
<img class="bkgimage" src="colorfulbackground.jpg">
In desktop version you set some css like width:100%; to make image fit in div, but in mobile version this css is replaced by opacity: 0;. So your image stop scaling to page width and opacity: 0 don't disappear image from rendering, only render as fully transparent. You should use display: none; instead, and move display: block; to desktop CSS because its overwrite mobile CSS. Selectors with id (#) are more important than selectors without them.
Few related links
Within CSS what is the difference between opacity:0 and display:none?
Does opacity:0 have exactly the same effect as visibility:hidden
-1
I can't reproduce this error with the mobile Edge browser, but maybe this meta tag could help:
<meta name="viewport" content="width=device-width">
mannaris
- 63
- 8