CODEWITHSUNDEEP
css
J82
J82

Reputation: 8457

Site doesn't look right in mobile browser

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?

Upvotes: 0

Views: 990

Answers (4)

geovani075
geovani075

Reputation: 377

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.

Upvotes: 0

Ani
Ani

Reputation: 4523

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

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

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.

Upvotes: 1

Rob Willis
Rob Willis

Reputation: 4844

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">

Upvotes: 0

Related Questions