WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Fourteen
[resolved] How to center the whole site (20 posts)

  1. Ben
    Member
    Posted 6 months ago #

    hi folks,

    (reposted to twentyfourteen sub forum)

    I am relatively new to theme development and just had a look at the twenty fourteen and implemented it. I do like the theme and wanna use it for a site.

    However it looks rather odd when the site is displayed left aligned on high resolution screen with a big space on the right side.

    Is there an easy way to center the whole site (header, sidebars, content, footer) on high resolution screens while maintaining the layout as is on mobiles and tablets? Any suggestions welcome. It might also be a good option to include this in the theme options from the beginning...

    cheers
    Ben

  2. Infos
    Member
    Posted 6 months ago #

    #page {
    margin-left: auto;
    margin-right: auto;
    }

    Try that in a child theme to center page.

  3. Jade WoW
    Member
    Posted 6 months ago #

    Funny, that's the easy part.
    I know those commands/statements.
    However where to place when using Edit Theme?
    (12 sections and subsections)

    Greetz,

    Jade

  4. Ben
    Member
    Posted 6 months ago #

    as Infos wrote you better use a child theme...your child theme is going to overwrite settings from the main template without you needing to modify it...

    @Infos: thanks ;)

  5. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

    @Jade WoW -

    Do not modify the theme
    and post your own thread if you need help.

  6. greenfuture
    Member
    Posted 6 months ago #

    Did any of you found a fix for this problem ?

  7. esmi
    Forum Moderator
    Posted 6 months ago #

    @greenfuture: If you require assistance then, as per the Forum Welcome, please post your own topic.

  8. greenfuture
    Member
    Posted 6 months ago #

    Use this plug in to center the theme for big screens
    Fourteen Extended

  9. ipunkbali
    Member
    Posted 6 months ago #

    I CANT BELIEVE no one can fix this problem.

  10. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

    @ipunkbali - this isn't your thread - it IS resolved for the OP. If you need help, please start your own thread per the forum guidelines -

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

  11. ipunkbali
    Member
    Posted 6 months ago #

    OK, FIXED IT. FORGOT to activate the TwentyFourteen-Child theme.

    #page {
    margin-left: auto;
    margin-right: auto;
    }

  12. lorrainetreanor
    Member
    Posted 6 months ago #

    Did it using Fourteen Extended. Easy shmeasy.

  13. e-commerce-concept
    Member
    Posted 5 months ago #

    Thanks for all

    this :
    #page {
    margin-left: auto;
    margin-right: auto;
    }
    in child theme is OK for me

  14. apuley
    Member
    Posted 5 months ago #

    @infos: Thank you. Snippet of code to centre the entire twenty fourteen theme worked like a charm!

    #page {
    margin-left: auto;
    margin-right: auto;
    }

    Remember everyone - less plugins is best. Add this to a child them and everything is perfect.

  15. ToursandTales
    Member
    Posted 4 months ago #

    Instead of creating a child theme, you can also add it to "Appearance, Edit CSS" - all CSS here gets appended to the bottom of the style sheet ;-) Very handy!

  16. esmi
    Forum Moderator
    Posted 4 months ago #

    Do not edit the Twenty Fourteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

  17. somaticmonk
    Member
    Posted 3 months ago #

    Simple and worked like a charm, thanks for this thread.

  18. tikisofla
    Member
    Posted 3 months ago #

    What is a child theme?

  19. fahimshekaib
    Member
    Posted 2 months ago #

    Thanks, it worked for me as well Infos!

    Anybody who is afraid of editing their Theme's core CSS files can follow this procedure:

    Step 1: Install the plugin "Custom CSS Manager" from the following link:
    http://wordpress.org/plugins/custom-css-manager-plugin/
    - It will appear under Appearance section after you install and activate the plugin.

    Step 2: Just Copy and pasted the code snippet provided above by Infos or here is a copy of it.

    #page {
    margin-left: auto;
    margin-right: auto;
    }

    Step 3: Refresh your website front end and you will see it all centered.

    Cheers :)

  20. zomidaily
    Member
    Posted 2 weeks ago #

    I found this shorter code, and works too:

    .site {
    margin:0 auto;
    }

Reply

You must log in to post.

About this Theme

About this Topic