Wrap element in builder pages and make full width

[Herb Trevathan]

Hey Jason,

I am working on this: http://brookteam.com/playground1/

I did this:

div.element.primary-element-2.element-columns.last-element {
	width: 100%;
	padding-top: 20px;
	background-color: rgba(255, 255, 255, 0.5);
}

I intended for this to span the entire screen…

Is there a way to wrap that with function or something and somehow make it span the whole screen

My guess is we should have started with the stretched child theme – but this was a build as we go and on an hourly basis – and it has morphed a few revisions to this hahaha.

Any ideas?

Thank You

Topic

[Herb Trevathan]

just got the comp http://tinypic.com/r/2z4bjmc/5

[Jason Bobich]

Hello,

I’m not aware of any way you’re going to be able to style it from the inner .element DIV. I think you’d have to re-structure everything in the layout’s wrapping DIV’s to accomodate that element’s wrapper being able to expand 100% of the browser window.

In other words, you’re going to have to re-think your Child theme’s overall containers. The stretch child theme would be a good example to look at in getting started.

[Herb Trevathan]

Got it – Thank You

What makes the #top in the stretch child theme full width? I was expecting to see a function in the functions.php or similar to add a wrapper or re register it in a hook, but it appears to have no modifiers?…

[Herb Trevathan]

I noticed this the other day and assumed it was maintenance:

http://www.themeblvd.com/demo/jumpstart/?child=stretch

is the default child theme correct? (css is minified and cached) – http://i43.tinypic.com/308z79s.png

[Jason Bobich]

What makes the #top in the stretch child theme full width?

This is all just CSS. Any DIV without a width that displaying in its default block state is going to be 100% width of its container. So, adjust width of the container and everything inside will be 100% width until styled otherwise.

Download the sample child theme from your My Account > Downloads page and checkout its style.css. The outside containers are left alone without a width. Then in #top, one of the inner divs is given a width and centered. This goes for each other major section, also — #featured, #main, #featured_below, #bottom, etc.

I noticed this the other day and assumed it was maintenance:
http://www.themeblvd.com/demo/jumpstart/?child=stretch
is the default child theme correct? (css is minified and cached)

Yeah, I just had to turn off CSS minification on the live demo’s W3 Total Cache settings. Looks like it’s good now.

[Author]

Replies