CODEWITHSUNDEEP
cssresponsive-designsassstylesheetzurb-foundation
HP.
HP.

Reputation: 19896

Block grid shows horizontal scroll bar in Foundation

I am just starting to learn Foundation (from previous messy css experience). I am trying to do a full screen block grid of 4 col images per row. I have this to make the row full width:

.row
  max-width: 100%

Here is the code:

<nav class='top-bar'>
  <ul class='title-area'>
    <li class='name'>
      <h1>
        <a href='#'>
          My Website
        </a>
      </h1>
    </li>
    <li class='toggle-topbar menu-icon'>
      <a href='#'>
        <span>menu</span>
      </a>
    </li>
  </ul>
  <section class='top-bar-section'></section>
</nav>
<div class='row'>
  <ul class='small-block-grid-2 large-block-grid-4'>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
  </ul>
</div>

I am getting annoying horizontal scroll bar. See below screenshot

enter image description here

I know it is the margin below:

@media only screen
[class*="block-grid-"]
  margin: 0 -0.625em;

But do I suppose to override it? It doesn't feel right (seem like a hack). How do I use Foundation properly to display block grid with full screen? It's a simple layout requirement.

Upvotes: 0

Views: 2646

Answers (3)

Shawn Erquhart
Shawn Erquhart

Reputation: 1858

For those who do not want to wrap their block grid within the standard row/column grid, simply hide the overflow on your block grid's parent element. Here's a superfluous code demonstration.

(html)
<div class="block-grid-parent">
  <ul class="block-grid">
    ...

(css)
.block-grid-parent {
  overflow: hidden;
}

Upvotes: 0

tnog
tnog

Reputation: 420

If you look at the docs explaining the Foundation grid they already use the box-sizing: border-box star hack

Since the .row containing your block-gridhas a set max-width of 100% it's overflowing the screen width. Typically, elements in the grid would be nested in .rows with defined max-widths and also contained within defined column sizes.

You can simply just do the hacky thing as you deeply fear and adjust the margin:

@media only screen [class*="block-grid-"] margin: 0 2em;

Or you can just contain your .block-grid with a container <div class="large-12 columns">.

Six of one half-a-dozen of the other I'd say. If you're afraid of screwing up the grid layout, you can use a conditional class on the body tag so that your customized block-grid only effects the pages that you want.

Upvotes: 3

Vilas Kumkar
Vilas Kumkar

Reputation: 1400

take a look of this demo by Paul Irish

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

this might be helpful else can you provide a fiddle?

Upvotes: 0

Related Questions