Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #1
JohnAlbinThat'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.
Comment #2
Anonymous (not verified) CreditAttribution: Anonymous commentedI'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).
I even tried editing the default value set in _grids.scss (sass-extensions >> zen-grids >> stylesheets >> zen), but this had no effect either.
Comment #3
georgedamonkey CreditAttribution: georgedamonkey commentedI'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:
Comment #4
JohnAlbinOH! 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?
Comment #5
georgedamonkey CreditAttribution: georgedamonkey commentedAh, 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.
Comment #6
JohnAlbinI'll update the docs on http://zengrids.com/help/
Comment #7
JohnAlbinComment #8
georgedamonkey CreditAttribution: georgedamonkey commentedThanks!
Comment #9
portulacaI'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?
Comment #10
JohnAlbinThe 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:
If $zen-auto-include-item-base is set to FALSE, then zen-grid-item() won't apply the gutter width to the item.
Comment #11
JohnAlbinA 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.