CODEWITHSUNDEEP
htmlcsszurb-foundation
The 0bserver
The 0bserver

Reputation: 986

Why is there a scrollbar at the bottom

I was experimenting with Zurb Foundation for a certain project, and for my page I used this.

 <div class="row text-center">
    <h3>Laurem Ipsom Dolor</h3>
    <div class="row">
        <div class="small-4 small-offset-2 columns">
        <img src="some.svg"  class="thumbnail centered">
        <h3>Laurem Ipsom Dolor</h3>
        </div>
        <div class="small-4 end columns">
        <img src="another.svg" class="thumbnail centered">
        <h3>Laurem Ipsom Dolor</h3>
        </div>
    </div>
</div>

Here is a working example: https://jsfiddle.net/f7kb9x6n/

So why is there a scrollbar (why does it exceed page width) at the bottom for medium and small screen sizes (example jsfiddle window which is usually quarter of a screen)

centered class just does a margin:auto, but shouldn't be of concern here as I haven't even defined it in the jsfiddle.

Upvotes: 2

Views: 78

Answers (4)

A.K.
A.K.

Reputation: 2322

.text-center {
    overflow: hidden !important;
}

Use this. It's working

Upvotes: 0

Jesus Lugo
Jesus Lugo

Reputation: 796

You shouldn't nest a .row inside another .row, direct childrens of .row should be .column (or .columns, whatever do you use), this markup should work for your case: 

 <div class="row text-center">
     <div class="column">
          <h3>Laurem Ipsom Dolor</h3>
          <div class="row">
              <div class="small-4 small-offset-2 columns">
              <img src="some.svg"  class="thumbnail centered">
              <h3>Laurem Ipsom Dolor</h3>
              </div>
              <div class="small-4 end columns">
              <img src="another.svg" class="thumbnail centered">
              <h3>Laurem Ipsom Dolor</h3>
              </div>
          </div>
      </div>

To answer why this happens, is because negative margin the .row apply to compensate the column gutter (spacing between columns). Please don't edit the CSS rules for .row .row, you'll be messing the Foundation grid.

Upvotes: 1

Lionel T
Lionel T

Reputation: 1597

Based on the Zurb docs you have to nest the second .row inside a .columns like in this fiddle forked

Upvotes: 1

Gibbs
Gibbs

Reputation: 22974

It is from your external css file.

Reason:

  .row .row {
     margin-left: -.625rem;
     margin-right: -.625rem;
     max-width: none;
   }

Remove margin right and try.

Upvotes: 0

Related Questions