Twenty Seventeen custom section - one column layout

Question

Twenty Seventeen custom section - one column layout

Martin

2020年2月2日 12:11

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!

Topic screen-layout columns Wordpress

Category Web

Andre · Accepted Answer · 2020年2月2日 12:11

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.

Martin · Accepted Answer · 2017年4月7日 14:28

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.

Twenty Seventeen custom section - one column layout

About