Altitude pro – wider page for category archives? (see example)

[lorilin]

Hi folks,

I was browsing the showcase for ideas and really like the layout of the category archive pages here:

https://arbinger.com/blog/category/recent-insights/

I understand how to get the thumbnail and text, but not how to make the content display wider.

Any tips about how to go about this?

Thanks in advance,
Lori

[Christoph]

Hi Lori,

around line 1398 of the style.css you will find the following code:

.full-width-content .content {
    padding: 0px 200px 50px;
    width: 100%;
}

If you reduce the 200px in the padding you will create "wider" pages.

This will target all pages that have the full-width layout selected.
You can target individual pages by making the above css more specific.
(e.g. you could add a custom-body class in the WordPress Editor and add it at the beginning of the code, or add .page-id-###... )

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[lorilin]

Thanks, Christoph! This totally put me on the right track. Here's what I ended up doing

My class is LL-widebody

Here's what my stylesheet looks like now

.full-width-content.front-page .content {
	padding: 0;
}
/*MY CUSTOM CLASS FOR WIDE PAGES*/
.full-width-content.LL-widebody .content {
    padding: 0px 50px 50px;
    width: 100%;
}

Then I put the following in functions.php

//* Add custom body class to the head
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
	
	if ( is_category() )
		$classes[] = 'LL-widebody';
		return $classes;
		
}

If I ever need to make this more specific, I can just target categories in the is_category() part.

Rockin!

[Author]

Posts