Full width fluid div rows in page

[neilgee]

Using the regular sample Genesis theme, how do you achieve full width fluid div rows in the middle of a page, so you can segment sections which can have color wrap backgrounds with content set to the page width.

---

Neil Gee
WP Beaches
Coolest Guides

[Brad Dalton]

Try content columns http://my.studiopress.com/tutorials/content-column-classes/

---

Tutorials for StudioPress Themes.

[neilgee]

hi Brad - thanks for the reply.

What i mean is content on the page that has backgrounds the span the entire viewport like the menus with the enclosed wrap class in Genesis.

---

Neil Gee
WP Beaches
Coolest Guides

[Brad Dalton]

I think you'll find the answer here http://www.studiopress.community/topic/fullwidth-widgets-home-top-in-homepage/

---

Tutorials for StudioPress Themes.

[ehassler]

@neilgee,

Did you find a workable solution, yet? I need to accomplish the same thing, and have the solution simple enough that my client can still use the Visual editor and not deal with markup. I'm thinking of creating some shortcodes that output the containers. I'm new to Genesis, so not sure if there's an established "Genesis-way" of handling this sort of thing.

Here's a theme that illustrates the concept: http://my.studiopress.com/themes/epik/#demo-full

[neilgee]

@ehassler,

Didn't really find a way to do it the way i want - which is to have all the page content within the actual page and managed via just the visual editor not via separate widgets.

I get the idea of pre and post page content added in via widgets but that is messy for handing over to a client.

I have ended up just using TwentyTwelve theme and making the main content div 100% and then setting up my full row wrappers and content inside divs on the page in the editor. - http://dev-wendymak.autopilotyourbusiness.com/ssr2014/

---

Neil Gee
WP Beaches
Coolest Guides

[neilgee]

hmmm thinking about it all you would need to do in Genesis is add:

.site-inner {
	max-width: none;
}

@media only screen and (max-width: 1139px) {
	.site-inner{max-width: none;}
}

Which will make the inner page content widthless then just add in some regular HTML/CSS markup for the rows.

---

Neil Gee
WP Beaches
Coolest Guides

[ehassler]

That's close to what I ended up with, but I didn't want the client to have to deal with HTML in the editor, so I put the markup into shortcodes instead. It's still a hack, I guess, but looks better (and is easier to remember) than extra markup directly in the editor.

The client will now see with something like this:

[fluid_row_open]
Content
[fluid_row_close]
[fluid_row_alt_open]
More contnt
[fluid_row_alt_close]

[samw]

Hi

Great tips - did you guys get this working on a page by page basis? I need to do this but only for certain pages

setting site-inner to max width none makes the entire site that way as expected

Neil - I saw your guide online but see that you set the whole site this way

Any help would be appreciated thanks

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[neilgee]

What you can do is just set up a custom body class which you can apply per post/page as required - just add the custom body class in front of the CSS rule.

---

Neil Gee
WP Beaches
Coolest Guides

[samw]

Hi

Thanks - I give up - I was using custom css all along - its a theme issue the site inner is not set so is 1343 by default, then the site wrap is 1140 which is getting called after the inner and then there's a hard coded entry-content div so even if you add a custom wrap size the entry content div kicks in!

What theme did you use - I see that all of your site-inner, wrap and entry-content are 1343

Cheers

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[neilgee]

The theme is a generic one built straight off Genesis Framework - not too sure how you have 1343 - do you have a URL to look at

---

Neil Gee
WP Beaches
Coolest Guides

[samw]

Hi

Thanks...I looked at your sites in firebug and its all 1343 including the div for entry-content so I guess its the default for site width none?

Im working on local dev so no link but using Enterprise Pro - you can see what its doing on the demo for landing page template. I have a new page template copied from the landing one but set to full width content (I have changed this to be 1140px not the 800 that's on the demo - also tried setting this to 1343 but the entry-content div kicks in!)

http://my.studiopress.com/themes/enterprise/#demo-full

I am only looking to add full viewport/site width coloured content boxes as divs on a few pages that will be full width....effectively creating 3 x sales/landing pages - rest of site as normal

I could change themes but would prefer not to..

Your sites look great by the way

Many Thanks in advance

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[samw]

Hey Neil - I managed to do this via CSS - thanks for your offer of help - no doubt this is not the "best" way but it works

after a lot of hunting around using CSS - there's a couple of ways to achieve this. No idea of the implications for mobile responsiveness or site load, so if anyone wishes to comment feel free:

Here's how to add full browser width bars to any part of your theme/page etc using CSS & Divs - just style accordingly

Method A - use the section class in CSS - as seen here http://codepen.io/receter/pen/uBJaK
I haven't worked out how to get my text to format as I would like yet - centred in section but here's my css
.section {
margin: 0 auto;
width: 25rem;
background: white; (background middle if you extend text)
padding: 20px;
}
.section h2 {
color: white;
position: relative;
background: white; (this changes the middle of box colour behind text)
}
.section h2:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: 0;
border-left: 9999px solid red; (this changes box colour on left)
box-shadow: 9999px 0 0 red; (this changes box colour on right)
}

Method B - Same principle different approach http://www.sitepoint.com/css-extend-full-width-bars/

My css here

.extendfull, .extendleft
{
padding-left: 3000px;
margin-left: -3000px;
}

.extendfull, .extendright
{ background:#000;
padding-right: 3000px;
margin-right: -3000px;
}
.extendfull body {
overflow-x: hidden;
}

Voila - coloured full width divs to use anywhere you fancy

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[Author]

Posts