Search code examples
phpcsswordpressthemes

How to make twenty-seventeen pages content full width


I want to make wordpress default theme, Twenty-seventeen, pages content to be full width. Below is the content-page.php file in template-parts i am trying to modify. I am not sure if i should modify something else. I should remove the sidebars in order for the content to be full width.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
        <?php twentyseventeen_edit_link( get_the_ID() ); ?>
    </header><!-- .entry-header -->
    <div class="entry-content">
        <?php
            the_content();

            wp_link_pages( array(
                'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
                'after'  => '</div>',
            ) );
        ?>
    </div><!-- .entry-content -->
</article><!-- #post-## -->

Thanks to @Dipak i managed to do it with some css:

I suggest to use a page template inside a child theme and modify that template with css. You can also try this ready made full width template.

@media screen and (min-width: 1200px) {
 /* For devices with more than ore equal to 1200px width */
    .wrap {

        max-width:100%!important;
    }
}

Solution

  • Solution 1 :

    Try to remove the sidebars in the template file you are working. This will remove the unwanted sidebars if you want to make your content full width.

    Solution 2 :

    If solution 1 is not the requirement, I believe you want your container to be full width without any padding or margin. Try to find the container area and apply some style to it.

    Sample code will be like following,

    #primary .entry-content {
      width: 100% !important;
    }
    

    Solution 3 :

    If above solutions are not helpful then you might want a particular solution to this. And that would be a Child Theme.

    There is a nice blog written on how to extend your Twenty Seventeen by its Child Theme. This will be very helpful to you. Check out this article.

    How To Master Twenty Seventeen

    Hope this helps.