Hi

In template/layout we currently have 'Main Content' set to 9 columns and 'Sidebar2' to 3 columns. However we want the 9 columns to be slightly wider and the 3 to be slightly smaller. Unfortunately changing it to a 10 / 2 layout is too big a change. Is there a way to fine tune the widths?

Thanks for your help

Brian

Hi Brian,

You could adjust the total template width or adjust the css for the widths

Cheers
Paul

Hi Paul

I have been experimenting by adding some custom.css rules as suggested. I'm starting to slowly get the hang of media queries but there is a lot of trial and error. In order to give zen 9 more width and zen 3 less I used the following which seems to work okay (so far). In order to ensure these rules only apply to particular pages rather than site-wide I added a page class, ' morewidthforzen9' , in the relevant page menus.

/*following 2 rules gives more space to maincontent and less for sidebar2*/
@media screen and (min-width: 1100px) {
.morewidthforzen9 .zg-col-9, .three-quarters {
width: 77% !important;
margin-right: 3% !important;
}
}
@media screen and (min-width: 1100px) {
.morewidthforzen9 .zg-col-3, .one-quarter {
width: 20% !important;
margin-left: 0% !important;
}
}

Additionally I added two more rules which means, hopefully, that the sidebar will not display at all when it drops to the bottom (below 1100px):

/*following 2 rules means below 1100px sidebar2 will not display and main content will display 100%*/
@media screen and (max-width: 1100px) {
.morewidthforzen9 .zg-col-9, .three-quarters {
width: 100% !important;
margin-right: 0% !important;
}
}
@media screen and (max-width: 1100px) {
.morewidthforzen9 .zg-col-3, .one-quarter {
display: none;
}
}

Do you think the above is technically / semantically a reasonable way to achieve the desired result?

Thank you

Brian

Hi Brian,

The page class certainly makes sense

Using importants can be problematic - so the comments are good.
It can be confusing

If it works ok then its good - I would test on different devices if you are able to

If you add zentools2 content to the pages I'd check to see how it behaves

Cheers

Thanks Paul. I will see if the styles still work if we remove the !importants. We seem to have created a lot of importants in our custom.css file so the more we can get rid of the better.

Sincerely

Brian

Good luck with it Brian

Cheers
Paul

This may help

www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

I tend to use importants if I have to override an inline style

Cheers
Paul

Sorry for the delay in replying Paul. Thanks for the article links - hopefully they will help with my understanding of specificity.

No problem

Hope the articles help

Cheers
Paul