CODEWITHSUNDEEP
htmlcssresponsive-designzurb-foundation
Eray Erdin
Eray Erdin

Reputation: 3149

Foundation 12 Grid Does Not Work Properly

I have a code as below:

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="content">
  <div class="row">
    <div class="left-frame large-3 medium-3 hide-for-small columns">
      <header class="icon-bar five-up" role="navigation">
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
      </header>
      <div class="side-nav">
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
      </div>
      <footer class="pagination-centered">
        <ul class="pagination">
          <li class="arrow unavailable"><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li class="arrow"><a href="#">&raquo;</a></li>
        </ul>
      </footer>
    </div>
    <div class="content large-9 medium-9 small-12 columns">
      <div class="row">
        <div class="large-3 medium-3 small-12 columns">q</div>
        <div class="large-6 medium-6 small-12 columns">q</div>
      </div>
      <div class="row">
        <div class="large-3 medium-3 small-12 columns">q</div>
        <div class="large-6 medium-6 small-12 columns">q</div>
      </div>
    </div>
  </div>
</div>

What I want is 3 to 9 grids on a page. However, second column goes inside the first as below:

enter image description here

Why does that happen? It is surely 3 and 9. What I want is to get second column in its own place.

Further Solutions Tried

#1: Decrease the Second Column

I have made the second column 8 grid, an it works like a charm now. Strange. However, this way, it become 11 grid total.

Environment

Upvotes: 1

Views: 233

Answers (2)

Shoaib Iqbal
Shoaib Iqbal

Reputation: 1178

It works fine when tested in codePen example with your code, it may be your custom code that is conflicting.

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="content">
  <div class="row">
    <div class="left-frame large-3 medium-3 hide-for-small columns">
      <header class="icon-bar five-up" role="navigation">
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
      </header>
      <div class="side-nav">
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
      </div>
      <footer class="pagination-centered">
        <ul class="pagination">
          <li class="arrow unavailable"><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li class="arrow"><a href="#">&raquo;</a></li>
        </ul>
      </footer>
    </div>
    <div class="content large-9 medium-9 small-12 columns">
      <div class="row">
        <div class="large-3 medium-3 small-12 columns">q</div>
        <div class="large-6 medium-6 small-12 columns">q</div>
      </div>
      <div class="row">
        <div class="large-3 medium-3 small-12 columns">q</div>
        <div class="large-6 medium-6 small-12 columns">q</div>
      </div>
    </div>
  </div>
</div>

http://codepen.io/shoaibik/pen/KrmdOJ

Upvotes: 2

Nick_O
Nick_O

Reputation: 472

I believe the reason is because columns are supposed to be wrapped by rows but you have column>row>column. In your situation you should utilise the .hide-for-small-only class and .hide-for-medium-upto get the results you want.

Upvotes: 0

Related Questions