- This topic has 5 replies, 2 voices, and was last updated 2 years, 7 months ago by Ying.
-
AuthorPosts
-
September 16, 2021 at 2:31 pm #1933123Ruthanne
Hello! I’m working on this site here: https://ruthannereid.com
I have two questions – thanks in advance for your help!
1. There is some weird stuff going on in posts. Some of the text is full-width, and some of it is properly contained. How do I make it consistent so it’s all in a column in the center instead of stretching full-screen? Example: https://ruthannereid.com/book-news/new-story-every-good-servant/
2. Does anyone know how to make these buttons justify to the bottom of each column? https://ruthannereid.com/books/
Thank you!
September 16, 2021 at 3:25 pm #1933149YingStaffCustomer SupportHi there,
Can you go to appearance > elements, remove the posts from the layout element which sets pages/posts to full width?
https://www.screencast.com/t/UyKJQhgf3c7For question 2, I see you are using GenerateBlocks already, I would recommend to use Grid block from GB instead of WP’s Columns block to build the layout.
Since the columns block doesn’t come with a specific ID, it’s very difficult to target using CSS.
Once it’s done, please get back to us, we can offer some CSS solution ๐
September 16, 2021 at 3:59 pm #1933163RuthanneHi, and thanks so much for the help! The posts trick worked like a charm.
I believe Iโve moved the blocks over properly to grids. Whatโs next? ๐
September 16, 2021 at 6:06 pm #1933195YingStaffCustomer SupportGood job, then you can try add this CSS:
.gb-grid-wrapper-95f84891 > .gb-grid-column > .gb-container >.gb-inside-container { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .gb-grid-wrapper.gb-grid-wrapper-95f84891 > .gb-grid-column >.gb-container > .gb-inside-container >*:last-child { margin-top: auto; }
And actually you don’t need to add 2
Grid
blocks for the 3 + 2 columns layout, you just need oneGrid
block with 5containers
.Here’s the documentation of Grid block, hope it’s useful for you:
https://docs.generateblocks.com/article/grid-overview/Set the first 3
Grid > Containers
to33%
in width, and the last 2Grid > Container
to50%
in width.Then you can select the
Grid
block add vertical and horizontal Gap accordingly for different width devices ๐September 16, 2021 at 7:15 pm #1933230RuthanneYou’re amazing! It looks SO good!
I also took your tip about understanding that Grid block better, and now the whole page is in that grid format. ๐ Terrific advice. Thank you!
September 17, 2021 at 10:38 am #1934021YingStaffCustomer SupportYou are very welcome!
Happy to be helpful ๐
-
AuthorPosts
- You must be logged in to reply to this topic.