This tutorial provides the CSS to make the content of inner pages (div.site-inner) in Cafe Pro full-width i.e., take up the full available width in the browser viewport.
Before:
After:
Both Flexbox and CSS Grid based solutions are provided. Flexbox is recommended for maximum browser compatibility. CSS Grid method does not work in IE11.
Tested in Cafe Pro 1.0.1.
Step 1
Let's add an inner class to the body element of all pages except that of the homepage per this article.
Add the following in Cafe Pro's functions.php:
add_filter( 'body_class', 'sk_body_class' );
/**
* Add `inner` class to body element for inner pages.
* i.e., for all pages other than site's homepage/front page.
*
* @author Sridhar Katakam
* @link https://sridharkatakam.com/add-inner-body-class-inner-pages-wordpress/
*/
function sk_body_class( $classes ) {
if ( ! is_front_page() ) {
$classes[] = 'inner';
}
return $classes;
}
Step 2
Flexbox method
Add the following in style.css above the media queries:
