Archived topic
Center Content to the middle of a page (desktop)
9 replies · Started by scometamus on March 15, 2023
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!
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
That worked perfectly, thanks!
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.
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.
This unfortunately did bring everything back to the beginning. So the content is not centered in the middle of the page anymore.
Oops, I'm sorry, there was a syntax error in my code, I've updated it again :)
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.
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.
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!
