Public Forums 71,145 posts

[kevinburk Friend kevinburkJoin date: January 2014Posts: 46Downloads:47Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#197601

I would like to know how to set up conditional margins (left and right) on the Purity III custom CSS template.

I’m playing with two backgrounds in my dummy site, as I figure these things out. The URL of the site as it is now is http://BurkDesignGroup.com/AM3

I have a darker pattern set as the body background, and a lighter pattern set in the custom CSS as the background of the .t3-wrapper, and I’ve set a left and right margin on the .t3-wrapper.

What I would like to do is to be able to define this margin based on the media size —*I want it present for the full-size viewing, and possibly for large tablet viewing, but when the size switches to smaller layouts, I’d like the margin to go away completely. I assume there’s a way to set this up with some kind of @media calls in the CSS, but I don’t know how to do that.

The .t3-wrapper margins seem to apply to the body content as well as the footer. What CSS class do I need to modify if I also want those margins to apply to the header and the MegaMenu?

Thanks,

Kevin Burk

[mpurcell Friend mpurcellJoin date: March 2014Posts: 14Downloads:0Uploads:0 Thanks: 6 Thanked: 5 times in 2 posts]

#534747

Kevin,

I have no official status here, but since it has been a couple of days including one work day since you asked your question, I’ll take a stab at helping. For the header/mega menu, looking at your site in Firefox with Firebug, your header looks like this:
<header id=”t3-mainnav” class=”wrap navbar navbar-default navbar-fixed-top t3-mainnav” style=””>
so I guess you could use .t3-mainnav or even #t3-mainnav to control that margin.

I think all you need to do with the media queries in custom.css, assuming you still have the default widths, is something like this. I noticed that the header already has the wide margin when the off screen sidebar is open, so I am not sure how this will affect it. If the margins already default to 0px, you can skip the first block. This is untested:


.t3-wrapper, .t3-mainnav {
margin-left: 0px;
margin-right: 0px;
}

@media screen and (min-width: 992px) {
.t3-wrapper, .t3-mainnav {
margin-left: 20px;
margin-right: 20px;
}
}

If you put it in style.less, it would look like this:


.t3-wrapper, .t3-mainnav {
margin-left: 0px;
margin-right: 0px;
}

@media screen and (min-width: @screen-md-min) {
.t3-wrapper, .t3-mainnav {
margin-left: 20px;
margin-right: 20px;
}
}

2 users say Thank You to mpurcell for this useful post

1. kevinburk
2. Ninja Lead

[Author]

Posts