I'm new do the Zen theme and this probably is just a configuration problem. I have an issue with properly aligning my content to the columns. I have a client design which has 12 columns with a total width of 1290px and gutter width of 30px. I'm using the SASS grid layout and have fiddled around with the grid settings and the zen-grid-background. When putting the $zen-column-count, $zen-grid-width to 1320px, the $zen-gutter-width to 30px the grid aligns perfectly with the client's design.

I then added my content-blocks with the following settings:

  .region-footer {
    @include zen-grid-container();
    text-align: left;

  .region-footer #block-menu-menu-footer-navigation {
    @include zen-grid-item(2,1);

  .region-footer #block-menu-menu-footer-leistungen {
    @include zen-grid-item(2,4);

  .region-footer #block-menu-menu-footer-projekte {
    @include zen-grid-item(2,7);

  .region-footer #block-block-1 {
    @include zen-grid-item(3,10);

  .region-footer #block-block-2 {
    @include zen-clear();
    @include zen-grid-item(12,1);

This seems to place the blocks into the right columns, but somehow the alignment with the underlaying grid background doesn't seem to work. With a fixed width the containers align, but the right one shoots out of the last column, with a percentage-width the alignment is always offset to the left. Somehow this seems to be a padding-problem and is probably due to my grid setup. I would be very thankful if you could help me out with the right solution the get everything aligned properly.

For better vizualization I've included a screenshot.

Thanks in advance

zen-theming-issue.jpg564.32 KBmicelino


micelino’s picture

Assigned:micelino» Unassigned
Priority:Major» Normal
micelino’s picture

Title:Can't get column alignment in reponsive grid to work properly» Can't get column alignment in reponsive grid to work properly.
micelino’s picture

Issue summary:View changes

added code

acetracer’s picture

I have this same problem. Figure it out?