Site logo

[Resolved] Center Content to the middle of a page (desktop)

Home Forums Support [Resolved] Center Content to the middle of a page (desktop)

Home Forums Support Center Content to the middle of a page (desktop)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2568496
    scometamus

    Dear GP-support team,

    on a single page I’d like to center the content. Currently everything is at the top, but I’d like to have it centered in the middle of the screen on desktops and tablets. For mobile this obviously wouldn’t apply, there the vertical alignment is nice.

    How do I do this though? I fiddled around with the Layout element and the container alignment, but for the latter it looks different on computer sizes or at least I didn’t manage to fully center it.

    Thanks in advance!

    #2568782
    Ying
    Staff
    Customer Support

    Hi there,

    1. Add this CSS:

    @media (min-width: 1025px) {
    .home .entry-content {
        display: flex;
        align-items: center;
        min-height: 100vh;
        flex-wrap: wrap;
        justify-content: center;
    }
    }

    2. Set the container block the flex-basis to 100%.
    https://docs.generateblocks.com/article/layout-options-overview/#flex-1

    #2568803
    scometamus

    That worked perfectly, thanks!

    #2568834
    scometamus

    One follow-up question: Now on the site the copyright text (implemented via custom html) is not centered anymore, although the headline above is. Instead the copyright text is attached to the right of the images.

    #2568846
    Ying
    Staff
    Customer Support

    I have updated the solution here:https://generatepress.com/forums/topic/center-content-to-the-middle-of-a-page-desktop/#post-2568782

    Try the new solution and let me know how it goes.

    #2568881
    scometamus

    This unfortunately did bring everything back to the beginning. So the content is not centered in the middle of the page anymore.

    #2568955
    Ying
    Staff
    Customer Support

    Oops, I’m sorry, there was a syntax error in my code, I’ve updated it again 🙂

    #2568959
    scometamus

    Oh! Haha saw it too now, perfect. It’s in the middle and centered again!

    However, the copyright container is still on the right side.

    #2568966
    scometamus

    Update: Couldn’t solve the issue by its core, but in a roundabout way: For simplicity I wanted to change the copyright container to an element so I don’t have to take care on it on each site. So when I do this, it is centered correctly as the rest of the content.

    #2568993
    Ying
    Staff
    Customer Support

    For simplicity I wanted to change the copyright container to an element so I don’t have to take care on it on each site.

    This is the right thing to do 🙂

    Glad you’ve sorted out!

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