Centering Pages Vertically?

Home Forums Premium WordPress Themes Seasonal Pro Centering Pages Vertically?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2055
    Morpheous Lewis
    Participant

    Is there any way of centering my pages vertically as my site is looking a little off line?

    I’m very new to CSS and am not getting anywhere unfortunately :angry:

    #2056
    ShapedPixels
    Keymaster

    Sorry for late reply…just starting my day here 🙂
    Anyway, do you have a link to your site and I will take a look at what you mean by a little off line.

    #2057
    Morpheous Lewis
    Participant

    Thank you for your reply, sorry I had to pop out.

    My site is:-

    http://phoenix-solutions.org

    and mostly noticable on:-

    http://phoenix-solutions.org/hypnotherapy-2/what-can-hypnotherapy-help-with

    It’s mainly when looking with a larger screen the sidebar is centred vertically but the screen on the right is at the top so looks out of line.

    Thank you.

    #2058
    ShapedPixels
    Keymaster

    Thank you for the link.

    Unfortunately, the theme was designed where only the sidebar is vertically aligned. To change the content area would require a significant change in the structure layout to vertically align that area too…and would be a little more complicated due to the variable types of content a user might add into a post or page, or when using a content based plugin such as a forum, shopping plugin, etc.

    The only thing I could suggest at this point in time is to change your “What can Hypnotherapy help with” page by putting your content in one column instead of two. This would at least take up some of the white space below.

    But your request does make me realize I never thought about the content area being kept as vertically aligned as well. I designed this theme to be more of a typical blog. As a side note, creating vertically aligned content is actually very complicated, especially if that one area is scrollable with the browser. In the old days of HTML, we used to be able to set a container height at 100% and simply do vertical alignment as middle. But unfortunately HTML has changed since then and removed that capability.

    #2059
    ShapedPixels
    Keymaster

    I was just trying to think of a solution for you and came up with one possibility. You can cancel out the vertical alignment of the sidebar so that it floats upward to coincide with your content area. This means though you lose the vertical middle positioning of your sidebar content.

    If you are interested in that, I can show you how that can be done.

    #2060
    Morpheous Lewis
    Participant

    Many thanks for all your help, I’m going to take a look and see if I can change my content to suit the layout better but if you could show me how I would do that I’ll maybe try it to see how it sits/looks.

    Love the theme, by the way.

    #2061
    ShapedPixels
    Keymaster

    Thanks for the theme comment 😉
    This quick tutorial will cancel out the sidebar alignment to float upward.

    If you are using Jetpack, then you use the EDit CSS feature that comes with it to do this, but if not, install a plugin called Simple Custom CSS.

    This lets you create your own stylesheet that should override the theme’s own stylesheet and also allow you to keep the theme updated without losing your changes.

    In this new stylesheet, you will add this code:

    [code]
    @media (min-width: 992px) {
    .site-branding, .toggle-buttons {
    display: block;
    }
    }
    [/code]

    What this does is change the container the sidebar content is in and cancels out the default styling the container box originally has. Your sidebar content will then float upward, but still maintains the centered layout.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.