PLEASE HELP! Center blog content

jacquelynmae · Member · Feb 9, 2015 at 5:15 am
Copy link

Add topic to favorites
Please help me center my blog post content. It is currently skewed to the left. Thank you.

The blog I need help with is: (visible only to logged in users)
1tess · Moderator Emeritus · Feb 9, 2015 at 5:47 am
Copy link
Your site looks perfectly centered in FireFox 35 (yeah, I should update it).

What browers and operating system are you using? Are you viewing on a tablet or phone? An older browser or operating system may not show off the best view of your site. And many sites look very different on small screens.
jacquelynmae · Member · Feb 9, 2015 at 5:49 am
Copy link
I’m using google chrome. But in my Firefox 35 browser it is not centered. However, on my mobile device it is centered. When you click on the post itself it is skewed to the left.
jacquelynmae · Member · Feb 9, 2015 at 5:53 am
Copy link
I’m using a 13″ macbook so maybe that could be the reason? is there anyway that I can make it so that it is centered on all screens and browsers?
1tess · Moderator Emeritus · Feb 9, 2015 at 6:07 am
Copy link
Okay, I see what you mean. I’ve been looking at the https://theme.wordpress.com/themes/zuki/support/
so it looks like what you are saying is on the left is actually the way the theme is designed with a widget area on the right.

Pages, not posts, can use a “full width” template. But a blog with only pages does not have much SEO, so it wouldn’t be a good idea to publish only pages.

You might be able to minimize the widget area with CSS, but I don’t have much experience to advise you how to do that. We can leave this thread open so someone from staff can help you with that.
thesacredpath · Member · Feb 21, 2015 at 7:27 pm
Copy link
@jacquelynmae, is what you are wanting is to have no sidebar on single post pages, such as http://lovefromjackie.com/2015/02/19/nyfw-2015-street-style/ ? If so, we can remove the sidebar with CSS and then center the content with the following.
```
.single #blog-sidebar {
    display: none;
}
.single #primary {
    margin-left: auto;
    margin-right: auto;
    float: none;
}
.single .entry-content {
    max-width: 100%;
}
```
See what you think and let us know.
jacquelynmae · Member · Feb 22, 2015 at 3:24 am
Copy link
yeah thats perfect except my logo isn’t centered. Also the layout appears different on different browsers. Any ideas? Thanks for your help!
jacquelynmae · Member · Feb 22, 2015 at 3:26 am
Copy link
Also is there anyway I can increase the width of my posts??
thesacredpath · Member · Feb 23, 2015 at 10:08 pm
Copy link
Hmmm, there is a bunch of CSS that is causing issues. Remove all of the existing custom CSS except for the following:
```
.wf-active .wp-header .wp-header-text {
    font-size: 30%;
    font-weight: 400;
}
```
Before I forget, “center” is not a valid value for either margin or float. To center a div, you set left and right margins to auto. If there is an existing float in the original CSS, such as a float: left; then you add a float: none; declaration.

Next, add the following to your custom CSS.
```
.site-content .post, .site-content .blog-title {
    text-align: center;
}
```
Let’s start with that and then we will work from there on centering your header. Make sure and check things in different browsers also.

No items found.