background for grouped modules

SOLVE
Highlighted
Top Contributor

I'm working on a landing page that has a full width header and footer with grouped modules for the content area. I added a background color to the content area, which shows up, but can't figure out how to get the color to extend beyond the group width.

 

Here's a link to the preview that's in the works, http://info.pitsco.com/-temporary-slug-3febd373-a6a0-4f3f-b0e0-2c8a1eec7356?hs_preview=NnIGvbks-5509...

 

We'll still need the top header to have the white background, and the footer to be grey.

 

Any suggestions?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Top Contributor

Figured it out with help. I removed the classes from the main group, and added only page-center to all the sub-groups. Yah, seems obvious after the fact.:{

Reply
0 Upvotes
4 Replies 4
Highlighted
Advisor | Platinum Partner

You can try one of two ways:

 

1. (recommended) Wrap the element in a div tag and apply the bg color to the wrapping div. This way you can make the wrapping div 100% width (instead of applying it inline with the style tag on the span12 class)

 

2. You can used the pseudo :before and :after on the element. Essentially set a position of relative on the main-wrapper class and then use .main-wrapper:before and .main-wrapper:after with absolute positioning and widths that make it go off page. The only problem with this is you also have to set an overflow-x:hidden on the body style so you dont see horizontal scrolling.

 

Hope this helps ya. Let me know if you have any additional questions. 

Reply
0 Upvotes
Highlighted
Top Contributor

Still a beginner, and learning as I go, so not quite sure where to put what you're suggesting. Understand #1 the best, but if I go to the template for this landing page I have the main content modules grouped. I have main-wrapper and page-center classes already assigned to this group. So, I'm not sure what you mean by wrap the "element" in a div, since applying 100% width to  this group is still only going to put the background behind the page centered area. Does that make any sense?

 

Support suggested removing my two classes, since it's already set for width: 100%, but then I loose the extra color spacing on each side of the main content. With this I could add blank modules to either side, but then I lose the standard content area size I have with page center on our other landing pages.

Reply
0 Upvotes
Highlighted
Top Contributor

Figured it out with help. I removed the classes from the main group, and added only page-center to all the sub-groups. Yah, seems obvious after the fact.:{

Reply
0 Upvotes
Highlighted
Advisor | Platinum Partner

Code Sample of wrapping elementCode Sample of wrapping element

 

 

 

Reply
0 Upvotes