Support » Theme: Twenty Fourteen » Center site content to full width

  • I am trying to make my blog site full width. I made a child site and have been mucking with the CSS, I eliminated the sidebar, etc. but I can’t get the main content to center under the header. Any suggestions? Can I do this with CSS? Is there a page that I need to adjust? Here’s the site: http://als-ny.org/blog/ Any help is appreciated. Thanks.

Viewing 14 replies - 1 through 14 (of 14 total)
  • In your child css replace:

    .full-width .site-content {
    	margin-right: 0px;
    }
    .full-width .site-content .has-post-thumbnail .entry-header {
    	margin-top: -48px;
    }
    .singular.full-width .site-content .has-post-thumbnail.hentry {
    	margin-top: -48px;
    }

    with

    .full-width .site-content {
    	margin:0px auto;
    }
    .full-width .site-content .has-post-thumbnail .entry-header {
    	margin:0px auto;
    }
    .singular.full-width .site-content .has-post-thumbnail.hentry {
    	margin:0px auto;
    }

    It worked. Thank you so much!

    Hi @als Blogger, could you please share with me, how did you remove the left sidebar?
    Thank you

    @danynek

    This thread covers removal of sidebars:

    It worked for me, but it does not seem to move content to the left as I expected. Now I will try the css mod described above.

    I’m not a style sheet whiz (to say the least).

    I have a child .css, but I don’t understand the directions above. The child .css starts out with nothing, so how can I replace those lines with other lines? Do I copy a whole section of the original style sheet into the child, then alter it in the child version?

    I want to delete the black area on the left, where the sidebar used to be. I deleted it with a child functions.php, as described in the other thread.

    Thanks.

    I think the assumption being made is that you have copied the entire style.css from twentyfourteen over to your child theme folder, and started modifying it there. Like you, I have only added the styles that need to be changed instead.

    Once I added a functions.php with the code provided in the thread I linked to above, I realized that it prevents widgets from being placed in the sidebars, but does not prevent them from being rendered – that has to be done using the css.

    Next, I looked for the code to be replaced, and found it in the 11.0 Media Queries section of the original styles.css file at line 3216. At this point, I decided to learn more about media queries in order to learn how I could apply this code to my child theme without copying everything over. This page explains how media queries work, and it is quite helpful.

    I think the trick is to put the appropriate media query into your child theme css above the replacement code, and it will override the master theme code depending on the width of the browser window. I will try it and see how it goes.

    As a novice at this, I welcome any input from those who really know this stuff!

    Thanks!
    Matt

    Hi @ danynek. Sorry. I unplugged for a bit. I copied the index.php file into the child folder and removed the following code:

    <?php get_sidebar( ‘content’ ); ?>

    and

    get_sidebar();

    Hi @ bjwarden. I am no expert either but from what I have learned about child folders you must duplicate the entire code of only the files you want to alter into the child folder file and make the necessary edits in that file.

    The child css (or header.php, index.php, etc.) will override the original one but in order to be effective all the code plus your edits/additions must be in the child folder.

    Any files you need not change/edit can remain in the original twentyfourteen theme folder.

    Could anyone offer me some insight on this? I’ve copied index.php file into my child theme’s folder, but it’s not showing up inside of the WordPress dashboard editor.

    I made the edits to it to try and remove the sidebar (so I could then subsequently center everything), but the sidebar is still there! What am I missing?

    All help is appreciated!

    http://www.gadgetfit.net

    Moderator Andrew Nevins

    (@anevins)

    For me solved in plugin: Fourteen Extended 1.1.4

    For me this worked:

    Add this in your functions.php:

    // Unregister Twenty Fourteen left sidebar
    function remove_left_sidebar(){
    	unregister_sidebar( 'sidebar-1' );
    }
    add_action( 'widgets_init', 'remove_left_sidebar', 11 );

    Add this on top of style.css:

    /* Removes left sidebar and centers site */
    .site:before { display: none; }
    #secondary { display: none; }
    div { margin: 0 auto; }

    @karinulli – Thanks that worked but now there’s a smaller white sidebar on the right side. Also, I’m trying to center the entire site too… Can’t believe the designer made it this complicated to remove a sidebar that nobody seems to prefer.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Center site content to full width’ is closed to new replies.