Neat ignores the grid on mobile

Question

I'm using the Neat Grid. Everything is fine on a 12-Grid but on mobile it doesn't work properly.

SCSS:

.how-it-works{
  @include outer-container;
  border: 1px solid green;

  &--box{
    border: 1px solid red;
    @include span-columns(4);
  }
}

Grid Settings

@import "neat-helpers"; // or "../neat/neat-helpers" when not in Rails

// Neat Breakpoints
$medium-screen: em(640);
$large-screen: em(860);

$mobile: new-breakpoint(max-width 500px 4);
$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
$large-screen-up: new-breakpoint(min-width $large-screen 12);

// Debug
$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.5;

HTML:

<section class="how-it-works">
      <h3>How it works</h3>
      <div class="how-it-works--box">
        <h6>Head</h6>
        <p>Text</p>
        <img alt="Customer ordering german candy." src="images/asian_girl.png">
      </div>
      <div class="how-it-works--box">
        <h6>Head</h6>
        <p>Text</p>
        <img alt="The Candy German handpicks high quality candy." src="images/bavarian_man.png">
      </div>
      <div class="how-it-works--box">
        <h6>Head</h6>
        <p>Text</p>
        <img alt="Postman with the german candy box." src="images/postman.png">
      </div>
    </section>

Desktop: http://cl.ly/image/0r2f0N0l132y

Mobile: http://cl.ly/image/0j0n3e1K0V07

I think the mobile version uses the 12 column grid but display a 4 column grid.

Did you try looking at the compiled CSS to see if it is generating what you expect? — cimmanon, Mar 16 '15 at 16:39

score 0 · Answer 1 · answered Apr 07 '15 at 16:08

The answer is right there in your Grid Settings file:

$mobile: new-breakpoint(max-width 500px 4);

In the Neat documentation, the new-breakpoint function takes a number of columns as its last parameter.

You could change the mobile view to have 12 columns and modify grid-settings accordingly, if you so chose.

Neat ignores the grid on mobile

1 Answers1