I have a child theme for twenty-seventeen and am trying to get the possibility to set sections to a one-column layout while the other ones still have their two-columns layout.

There seems to be an idea for a solution where a page template is created and a function is inserted into functions.php:

add_filter( 'body_class', 'one_column_page_body_classes', 12 );

function one_column_page_body_classes( $classes ) {
    if ( is_page_template( 'template-parts/one-column-page.php' ) && in_array('page-two-column', $classes) ) {
        unset( $classes[array_search('page-two-column', $classes)] );
        $classes[] = 'page-one-column';
    }
    return $classes;
}

I did not manage to get this working.

Thanks in advance!

I have a child theme for twenty-seventeen and am trying to get the possibility to set sections to a one-column layout while the other ones still have their two-columns layout.

There seems to be an idea for a solution where a page template is created and a function is inserted into functions.php:

add_filter( 'body_class', 'one_column_page_body_classes', 12 );

function one_column_page_body_classes( $classes ) {
    if ( is_page_template( 'template-parts/one-column-page.php' ) && in_array('page-two-column', $classes) ) {
        unset( $classes[array_search('page-two-column', $classes)] );
        $classes[] = 'page-one-column';
    }
    return $classes;
}

I did not manage to get this working.

Thanks in advance!

• columns
• screen-layout

2 Answers 2

I found an answer, but maybe there is a better way using page-templates and applying the change directly.

For now, it's possible to apply the following in the stylesheet:

body.page-two-column:not(.archive) #primary #panel1 .entry-header{  
  width: 100%;
}
body.page-two-column:not(.archive) #primary #panel1 .entry-content, body.page-two-column #panel1 #comments{
  width: 100%;
}

Altering the #panel number you can hard code the fix onto the respective section.

To make Twenty Seventeen full width in WordPress, add the following CSS to your theme’s CSS file, or in Customizer’s Additional CSS:

.wrap {
    max-width: 100%;
}

@media screen and (min-width: 48em) {
    .wrap {
        max-width: 100%;
    }
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
    max-width: 100%;
}

@media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap {
        max-width: 100%;
    }
}

You can adjust the 100% values. Set these to 90% for example for a 90% main content width.