Rebalance Theme – Centre Align CSS
-
Hi,
Im not able to centre align my blog posts (not the text, but the whole post itself).
They seem fine on the homepage, but as soon as you open a post its all aligned to the right of the screen.
I’ve tried most CSS codes i can find online, but nothing seems to work.Any tips on how to solve it?
Thanks
The blog I need help with is: (visible only to logged in users)
-
Hi there,
You will need to start a new thread in the CSS customization forum.
https://en.forums.wordpress.com/forum/css-customizationNote 1: If you have the required upgrade you can use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can create a thread that will appear in the CSS Forum where you will get the help you need with CSS editing.
Note 2: You can also post there prior to purchasing an upgrade to get an answer to whether or not what you want to do can be accomplished via CSS editing.
-
Hi @krbr1987,
I’d like to try to help you get what you need.
At the most basic, you are trying to center a “block” (an usually-invisible box of content) on your web site. Each “div” section creates one block. I’m seeing a lot of these blocks being pushed to the right, such as the post title, the post content, and the comments. This might be caused by a few different things, one of which is that if you’ve added some custom CSS with the following in it, try deleting it and see how it affects your site:
margin-left: calc(33.333%);
float: right;At it’s core, you have a pretty advanced theme that you’re using and it’s got a lot of customization that seems to be problematic. It might be worth taking some time to delete, rather than add, parts of the CSS that are making the theme act strange.
This CSS that I’ve written should help center those things. But, again, this is very hack-ish, meaning it’s correcting things already set in the Theme. You’d be better of finding a way to delete what’s causing these issues. In the mean time, try this:
.entry-content, .comments-area, .single .hentry .entry-title { display: block; /* makes sure these items are acting as a block */ margin-left: auto; /* setting margin left and right to "auto" centers a block */ margin-right: auto; float: none !important; /* this corrects something already broken, so it's duplicating code. Clean up the source with "float: right;" to remove this duplication. */ } @media screen and (min-width: 800px) { .comments-area { padding: 0 20%; /* this corrects something already broken, which is a @media query pushing the comments box to the left with an odd "padding" tag. It's duplicating code. Clean up the source to remove this duplication. */ } } -
Reading over the post again, I have a couple typos: I meant “You’d be better *off*…”, not “of”. 2nd, in the code comment, I said “…pushing the comments box to the left…”. It’s pushing the comment box to the right.
Best of luck. Let us know how this works!
-
-
-
Hi jessestu,
Thanks again for your help. The code you provided did help align the header and comment box on all posts, but the rest of the content are is still pushed to the right of the window.
The full CSS code seem to unavailable, as its not located in the customize option, so I am unable to delete any of it.
If you have any suggestions on how to align the rest, please let us know.
Thanks.
-
Did it align the contents of the post the way you wanted?
There are other sections I realize I left out. I also don’t have a Premium account so I don’t know what advanced theme editing looks like on WordPress.com. I do on WordPress.org, but that’s different and I’m still working to learn the differences. Without access to those core theme files (what would be in a “/theme” folder with WordPress.org), you may not have the option to delete, for instance, the really funky “padding” tag that pushes things to the right.
So, back to non-tech language land. Replace the old code with the following. It centers the navigation links at the top (delete the words “, .main-navigation” if you don’t want that) and the sharing links after the post.
.entry-content, .comments-area, .single .hentry .entry-title, .entry-footer, .main-navigation { display: block; /* makes sure these items are acting as a block */ margin-left: auto; /* setting margin left and right to "auto" centers a block */ margin-right: auto; float: none !important; /* this corrects something already broken, so it's duplicating code. Clean up the source with "float: right;" to remove this duplication. */ } @media screen and (min-width: 800px) { .comments-area { padding: 0 20%; /* this corrects something already broken, which is a @media query pushing the comments box to the right with an odd "padding" tag. It's duplicating code. Clean up the source to remove this duplication. */ } }Let me know what else you want to happen here.
-
Thank you for getting back to me.
Looking at the CSS you put in there, it looks like it’s just an extra comma breaking it after you deleted the “.main-navigation” part without removing the comma before those words. That messes CSS up. The following should be your CSS, no changes, except it’s re-indented and that comma has been removed. Try it and let us know what happens!
.entry-title { text-align: center; } .entry-content, .comments-area, .single .hentry .entry-title, .entry-footer { display: block; margin-left: auto; margin-right: auto; float: none !important; } @media screen and (min-width: 800px) { .comments-area { padding: 0 20%; } } -
-
-
Hi @jessestu, I’m having a problem with the alignment of my wordpress using rebalance theme (deathinavo.wordpress.com).
If you look at the individual posts the format is off centre, skewed to the right on desktop mode but on mobile and tablet apps is fine. How do i change this?
Also, How do i do this above coding?
from a noob person when it comes to coding
-
Hi @deathinavo,
The final code above fixes the issue on your page, too (here’s an anchor link to the exact post).
It’s notable that this has come up twice. It might need addressing by the developer. I’ll have staff check this post and see what they know about this issue.
To add custom CSS, a user has to have a Premium or Business plan on WordPress.com. You can know what you have by looking at the plan for your blog:
https://wordpress.com/plans/deathinavo.wordpress.com
If you have one of those two plans, follow these instructions to get to the CSS editor:
https://en.support.wordpress.com/custom-design/editing-css/
If you don’t, stay tuned. I’ll get staff to check in on this.
Best,
Jesse -
*note for staff*
For two different users, Rebalance theme has caused the post pages to sit right-of-center for the main content. It looks to me as if there’s a missing widget column. Is there a non-Custom CSS fix for this issue?
Best,
Jesse -
I see it happening on my test site (note: set to private for non-staff).
It’s happening at the 881px @media breakpoint.
Thanks!
Jesse -
My pleasure!
If you don’t want your blog to look that way until there’s a fix, you have some options:
– Apply a different theme for now.
– Make all your viewers access your site on a phone or tablet (this is not a real solution 😉)Best,
Jesse -
Hi folks, I’m going to double check with our theme team, but I believe that’s just how this particular theme is designed. You can see the same right alignement in the demo:
https://rebalancedemo.wordpress.com/2016/05/01/the-grace-of-the-duke-of-wellington/Possibly to “balance” a heavy left-alignment above? I’ll double check to be sure.
- The topic ‘Rebalance Theme – Centre Align CSS’ is closed to new replies.
WordPress.com Forums 