CODEWITHSUNDEEP
cssiphonetwitter-bootstrap-3
ilovedoingwebsites
ilovedoingwebsites

Reputation: 97

contents overflowing container in bootstrap 3.0

I have this website: click here to see my website

My problem is that when I open the website in my iphone, the website fills the iphone's screen, but there is something making the website have more than the width of the screen, there is like a padding to the right that I cannot find where is it, also at the top of the website there is a background that I cannot also identify where is it coming from, maybe it is related?

Let me know please, Thank you

Upvotes: 1

Views: 2382

Answers (3)

jme11
jme11

Reputation: 17387

The problem is that you've changed the grid classes and made the container class have 0 padding left and right. The grid works in 3 parts and each is essential. You've got the right components in there: container, row and columns, it's just that you seem to have made adjustments to the padding that is breaking the natural behavior of the grid.

How the Grid Works

By default, the container has 15px of padding. The row negates the container padding with -15px of margin. Columns have 15px of padding, which pull the content away from the edges of the container and create a consistent 30px gutter.

The purpose for adding 15px of padding that is only negated by the negative row margins seems silly, but it is essential to allow for nesting columns inside of other columns! Note in the diagram below how the nested columns indicated by the red outline fits neatly into the enclosing column without getting additional padding applied.

enter image description here

In your case, you've modified the grid to have 10px of padding left/right on your column classes, 10px of negative margin on your row class and 0 padding left/right on your container class. By setting the left and right padding to 0 on the container, when your columns collapse down to a single column on at the xs breakpoint, there is nothing to pull the content away from the sides of the window/viewport. Your single column has left/right padding of 10px, but the row has a negative margin of 10px, thus everything is expanding to the full width of the viewport.

The Fix

To fix the problem and without affecting your existing design, you can add a media query that will add some padding to the container for the xs breakpoint only:

@media (max-width: 768px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

This will ensure that your overall design is unaffected at all other viewport sizes above 768px.

If you want your navigation bar and footer to extend to the full width of the window/viewport, since it is inside a container, you can add to the media query to adjust for this as well:

@media (max-width: 768px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  nav, footer.row {
    margin-left: -15px;
    margin-right: -15px;
  }
}

Upvotes: 3

gmslzr
gmslzr

Reputation: 1251

This is what's between your tag:

<header class="row">
        <div class="col-lg-3 col-sm-1">...</div>
        <div class="col-lg-7 col-sm-7">...</div>
        <div class="col-lg-2 col-sm-7 col-md-8 visible-lg visible-md">...</div>
        <div class="col-lg-2 col-sm-7 visible-xs">...</div>
  </header>

I believe you're overflowing Bootstrap's 12 column grid, on large screens you're using 14 while on small ones 26 (?) that's problem #1

Upvotes: 0

neja
neja

Reputation: 378

What's making the mobile page wider than expected is bootstrap's .row style: margin-right: -10px, for this element here:

<header class="row">
    ...
</header>

Have you been adding your own negative margins somewhere?

Upvotes: 0

Related Questions