Rebalance, Align Centre CSS code

  • Unknown's avatar
    krbr1987 · Member ·

    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)

  • Unknown's avatar
    jessestu · Member ·

    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 the 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 off 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 right with an odd "padding" tag. It's duplicating code. Clean up the source to remove this duplication. */
  }
}

    Let me know how this solves your problem and what the next step you need is. Good luck!

    Jesse

  • Unknown's avatar
    timethief · Member ·

    Hi there,

    After I asked you to create a thread in this CSS customization Forum, your first thread was answered here https://en.forums.wordpress.com/topic/rebalance-theme-centre-align-css?replies=5

  • The topic ‘Rebalance, Align Centre CSS code’ is closed to new replies.