CSS for Full Width Page

[mitchellm]

I'm brand new to WordPress and the Genesis framework.

I want to make my full-width page narrower. I know how to do this via CSS. I can take the original:

.full-width-content #content {
width: 100%;
}

. . . and simply change the percentage. I also know how to set this for smaller screens (e.g. phones) so the width reverts back to 100% in those cases.

The part that's confusing me is that full-width page seems to subsequently control the look and feel of the Archives page and the Home page (i.e. that show at 75%, e.g. if I set the full-width to that). I didn't expect this result, but I am new.

My question: is there a CSS way so that I can set full-width to something like 75%, but the Archives page and Home page (and any other impacted pages I may not have noticed) remain at 100% (or whatever they were at default)?

Essentially I want to set up a special type of page that has a good amount of white space on the left and right. So, I suppose an alternative solution would be to create a new page template: but I have no idea how to do this, or if it's feasible.

[Brad Dalton]

Try adding a custom body class to the page under Layout Settings.

Or you can use PHP with a conditional tag to add a custom body class:

add_filter( 'body_class', 'custom_body_class' );
function custom_body_class( $classes ) {
	if ( is_page( 'custom-width' ) )
		$classes[] = 'custom-body-class';
		return $classes;
}

Source: http://my.studiopress.com/snippets/custom-body-class/

Or you can change the layout conditionally and also add a custom body class:

Or you could rename the landing page template and use it as a custom page template with body class so you can change the width.

---

Tutorials for StudioPress Themes & WooCommerce.

[mitchellm]

@braddalton: Many thanks for all the options! This is good to know and I'll explore them a little later. For now it seems like your first proposal ("Try adding a custom body class to the page under Layout Settings.") seems the best for the short run. Unfortunately my specific knowledge of Genesis (and hooks and filters and many other things) is very small.

I see where the Layout Settings is for a page. I tried putting in my CSS, but that didn't work. So how does this work? Do I add something to the CSS, and then a special code here? Something completely different? Sorry for my ignorance, but I'm not figuring out the specific set of steps I need to take in this case.

[Brad Dalton]

Basically, you create a custom class named whatever you like, insert it into the field under the Layout Settings and then use that in your CSS rule in your child themes style.css file:

.your-custom-class {
your css delarations
}

Wrote a post about this a while ago.

If its only for one page, then the first solution is the easiest.

---

Tutorials for StudioPress Themes & WooCommerce.

[mitchellm]

@braddalton: Thanks for the added info. Worked perfectly! Great to know moving forwards. Now that I know how to change things for a specific page, somewhere in the near future I need to follow through on some of your other recommendations so I know how to make more general changes, rather per-page. One step at a time! Thanks again.

[Brad Dalton]

Any time Mitchell.

Its an absolute pleasure helping fellow StudioPress community members.

---

Tutorials for StudioPress Themes & WooCommerce.

[Author]

Posts