Hi everyone,

I have had a bit of a torrid time with margins when setting a grid class within another grid. The HTML output from my custom fields views page goes a little something like this:

<div id="zone-content" class="zone zone-content clearfix container-24">
<div class="grid-24 region region-content" id="region-content">

/*------added manually via views------*/
<div class="grid-12 portfolio-grid alpha">STUFF IN HERE - LHS of screen</div>
<div class="grid-12 portfolio-grid omega">STUFF IN HERE - RHS of screen</div>
/*------*/

</div>
</div>

As you can see, container-24 (the content zone), a region (content) within that which is set as primary, hence the grid-24 (margin left and right of 10px), and finally, two nested horizontal regions which I added in views which have a class of 'grid-12', which of course adds ANOTHER 10px of margin left and right. Now you have 20px of margin left and right within the 960 grid and it breaks the layout.

So, adding the class of alpha to the LHS region and omega to the RHS region has the desired effect when in narrow or normal mode. The classes take out that added 10px of margin (left and right) which happened because of the nested grid. All good so far.

Then I resized and saw the immediate problem. A margin of 20px on either side of the (now stacked) regions.

Alpha and omega class now have little effect (and aren't inlcluded on the mobile.css) when the regions are stacked as you now need to remove BOTH left AND right 10px margins for EACH region. I have had to add extra classes (see class 'portfolio-grid' above) here and there to take out these undesired extra, layout breaking margins.

Setting margins left and right for nested grids of -10px on views rows etc. also works but I don't like that method. Also, I couldn't achieve this via blocks as I needed to style out a views page into the 960 grid.

I just wondered how everyone else deals with things like this or whether the Omega theme is not intended for nesting grids?

Out of the box, it's great for making pages for a mobile that just stack down the page but views pages for a desktop are a nightmare to style out.

Sam.

Comments

samwillc’s picture

samwillc CreditAttribution: samwillc commented

I actually came up with a solution that appears to work so far. I have added another class as follows to global.css:

/*
 * ==========================================================
 * Gamma
 * ==========================================================
 */

.gamma {
 margin-left: 0;
 margin-right: 0;
 }

and modified the css on 'alpha-default-narrow-24' and 'alpha-default-normal-24.css' to

/*
 * ==========================================================
 * Alpha - Omega
 * ==========================================================
 */

.alpha {
  margin-left: 0;
  margin-right: 10px;
}

.omega {
  margin-right: 0;
  margin-left: 10px;
}

These are the two grids I use so you would have to amend depending on what grid you use (or even better, be included in the next Omega release pending more testing).

I tested it on one of my views which has multiple regions in one row, bearing in mind the following code is nested inside a div class="grid-24":

<div class="grid-12 gamma alpha">
<div class="portfolio-list-image">[field_preview_image]</div>
</div>
<div class="grid-11 prefix-1 gamma omega">
<h2>[title]</h2>
[field_intro]
<div class="portfolio-link">
[view_node]
</div>
</div>

The gamma takes away the extra margins for mobile display (alpha and omega do nothing on mobile), and when on narrow and above, the alpha and omega stick the relevant margins back on that gamma has previously taken off.

Alpha and omega classes have to load after the grid in the css order, so sticking alpha, omega and gamma classes all in global.css and removing alpha and omega classes from the grid css stylesheets doesn't work.

This would mean changing ALL the alpha and omega classes on every grid styleheet, bit of a mission, but worth it for nesting grids without the hassle of nothing lining up properly or breaking the layout. I need to test this further but it works so far.

Sam.