I am using Omega / Delta / Context, and am trying to make the content zone a little wider than its surrounding regions using negative margins but the

.container-12 { margin-left: auto; margin-right: auto; width: 1200px; }

class overrides my attempts to change margins or width with CSS via class names (ie, using Theme Settings => Zone and Region Configuration => Context Section => Content Zone => Configuration => Additional zone classes)

How can I accomplish this?

  • 1
    Just a side note, but messing with the grid dimensions can really break layouts unless you really work out the consequences. – mpdonadio Jan 21 '13 at 18:08
  • Point taken but it's a design requirement that must be implemented. – user320691 Jan 21 '13 at 19:58

OK, you really have two options.

One is to put a more specific rule in your media query sheets. So, you would need to place a rule in mytheme-alpha-default-wide.css Normally, this comes before the grid sheet, so you either need a more specific rule or !important.

.zone-content .container-12 { width: 1300px !important; }

Your second option is to implement implement a hook_css_alter(), find the wide sheet for your grid system (eg, alpha-default-wide-24.css), and then swap it out with your own version. Then, in your own version you can do something like:

.container-12 { margin-left: auto; margin-right: auto; width: 1200px; }
.zone-content .container-12 { width: 1300px; }

And, as a side note, you will likely have issues due to redefining the grid width. The grid classes inside it will not work as expected.

| improve this answer | |
  • I wound up going with your first suggestion. The CSS looks like .zone-content .container-12 { width: 1216px !important; padding-left: 16px; } I had to balance the extra pixel width with an equivalent number of pixels of left padding. Thank you @MPD! – user320691 May 29 '13 at 3:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.