Hello,

I've got a site I'm working on and I have a sub-theme I'm working on within the latest dev version of Zen. I'm running into a problem with the gutter width of some containers. Here's my code:

.view-frontpage {
  $zen-column-count: 3;
  $zen-gutter-width: 25px;
  @include zen-grid-container;
  .views-field-field-image {
    background: url(../images/bg_blogimg.png) top left no-repeat;
    padding: 12px 0 8px 0;
  }
  .views-row-1 {@include zen-grid-item(1,1);}
  .views-row-2 {@include zen-grid-item(1,2);}
  .views-row-3 {@include zen-grid-item(1,3);}
}

No matter what I set the gutter width to, it sticks with the default. Is there a bug, or am I doing something wrong?

Thanks!

Comments

JohnAlbin’s picture

Status: Active » Closed (cannot reproduce)

That's strange. I've never experienced that problem. Zen Grids has extensive tests that change the gutter width multiple times in a single stylesheet and they all pass.

Anonymous’s picture

Status: Closed (cannot reproduce) » Needs review

I'm having the same problem as well. Overriding things like column count in one stylesheet has immediate effect, but the gutter width property only seems to respond to the original declaration in the CSS file. In my case, the following code changes the number of columns, but the gutter always stays at 30px (15px margin on each side of things).

$zen-column-count:  4;
$zen-gutter-width:  30px;
@media all and (min-width: 481px) and (max-width: 767px) {
  $zen-column-count: 3;
  $zen-gutter-width: 20px
}
@media all and (max-width: 480px) {
  $zen-column-count: 1;
  $zen-gutter-width: 10px;
}

I even tried editing the default value set in _grids.scss (sass-extensions >> zen-grids >> stylesheets >> zen), but this had no effect either.

georgedamonkey’s picture

I'm not sure if this is the proper way to code this or not, but since I first posted this issue, I've found that adding this line directly after zen-gutter-width seems to correct the issue:

$zen-auto-include-item-base: true;

Here's the entire bit for clarification:

@media all and (min-width: 650px) {
  .view-frontpage {
    $zen-column-count: 3;
    $zen-gutter-width: 25px;
    $zen-auto-include-item-base: true;
    @include zen-grid-container;
    .views-field-field-image {
      background: url(../images/bg_blogimg.png) top left no-repeat;
      padding: 12px 0;
    }
    .views-row-1 {@include zen-grid-item(1,1);}
    .views-row-2 {@include zen-grid-item(1,2);}
    .views-row-3 {@include zen-grid-item(1,3);}
  }
}
JohnAlbin’s picture

Category: bug » support

OH! I finally understood the problem.

Yeah, the problem is that the auto-include-item-base feature adds the half-padding when you call the zen-grid-item-base() mixin. So when you change the gutter-width, you're not applying the new gutter unless you reapply the zen-grid-item-base() (or set $zen-auto-include-item-base: true; as george suggested.)

What do you think the best solution to this would be? More docs? new mixin?

georgedamonkey’s picture

Ah, ok.

I think something in the docs would be good. I ended up spending quite a bit of time trying to figure that one out.

JohnAlbin’s picture

Component: CSS/SASS/HTML markup » Documentation
Category: support » bug

I'll update the docs on http://zengrids.com/help/

JohnAlbin’s picture

Title: zen-gutter-width: not working » Changing $zen-gutter-width doesn't affect new grid items when $zen-auto-include-item-base is true
georgedamonkey’s picture

Thanks!

portulaca’s picture

I'm also affected by this, but don't quite understand what is happening.

Could you please explain more about what $zen-auto-include-item-base does? Which (GitHub) file should I look into to compare the true and false consequences? What are the cases when we should pay attention to this, whenever we change gutter width locally and global $zen-auto-include-item-base is set to false?

JohnAlbin’s picture

Status: Needs review » Active

The issue is that $zen-gutter-width is a global value, but that value only gets applied to the CSS when you do one of 2 things:

  1. Call zen-grid-item-base() directly.
  2. Have $zen-auto-include-item-base set to TRUE and call zen-grid-item().

If $zen-auto-include-item-base is set to FALSE, then zen-grid-item() won't apply the gutter width to the item.

JohnAlbin’s picture

Issue summary: View changes
Status: Active » Fixed

A new _layout-3col.scss file was just added to 7.x-6.x-dev that shows how to do varying grid widths on different media queries.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.