0

I'm building a site right now and when I load up the site on a mobile browser, some of the elements get pushed to the left leaving an ugly white space on the right:

My guess is that the large beige rectangle (directly below the nav) has a width that is larger than the wrapper below it. Note: the rectangle is not contained within a wrapper. However, I have tried a few different methods and I still get that white space on the right.

Can someone me help point out where I went wrong?

J82
  • 8,267
  • 23
  • 58
  • 87
  • Possible duplicate of [Responsive web design is working on desktop but not on mobile device](https://stackoverflow.com/questions/14304494/responsive-web-design-is-working-on-desktop-but-not-on-mobile-device) – showdev Dec 12 '17 at 20:08

4 Answers4

1

The elements on your page have all sorts of varying widths, such as the #pinboard div, which is 1123px wide—quite a bit wider than some other elements (e.g. nav 1000px). That leaves white space between other narrower elements and the edge of the screen. (As a test, narrow your browser window, and you'll see a horizontal scroll bar at the bottom of the page before you probably expect to.)

If you give everything the same width, things should look a lot better.

ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • This is what I figured. I would like to put the whole thing in a 1174px wrapper (the widest width which is the width of the beige rectangular div), but I am not certain how I can arrange it especially with the various background images going on. Anyway, thank you for helping me confirm the problem. – J82 May 31 '13 at 00:22
0

The viewport meta tag has resolved this kind of issue for me in the past, try adding this to your HTML header:

<meta name="viewport" content="width=device-width">
Rob Willis
  • 4,706
  • 2
  • 28
  • 20
  • I think that may have pushed the elements even further to the left. http://i.imgur.com/PZmwtBW.jpg – J82 May 30 '13 at 13:16
  • You were partly right so I'll give you the vote. I added this and it worked: `` – J82 May 31 '13 at 10:44
0

Try to check if you have any css that mentions left or right. or absolute ?

Ani
  • 4,473
  • 4
  • 26
  • 31
0

Width of few elements in your website are different.

eg:

#slide:width: 1174px;
.menu-main-container: width: 1000px;

iPhone takes the maximum width. please use one & same width or use a wrapper and put everything in it.

geovani075
  • 369
  • 1
  • 2
  • 12
  • I put everything in a 1174px width wrapper (the width of the widest element `#slide`) but it's still not working. Do you see anything that is wrong? Please excuse the mess, it's being worked on. – J82 May 31 '13 at 08:27