- This topic has 3 replies, 2 voices, and was last updated 2 years, 12 months ago by
.
-
Posts
-
Hey Guys,
I really like the new upgrade of Generatepress. However i’m not that good with flexboxes. I have some content i need to be centered and i don’t know how to do it. Is there a good explanation of how to use flex boxes in generatepress?
I have a few examples maybe you guys can explain how i can fix it.
Question 1
I have a grid where the content needs to be aligned. I think this is possible with flex box.
https://prnt.sc/Vi0O69-pT5l2 (how i want it to be)https://prnt.sc/qi_3k0WGimeo (how it is right now) the content should be lower and in the middle of the div.
Question 2
Allmost the same question the content needs to be pushed down so it has the same space on the top as well as on the bottom.
https://prnt.sc/CNMCrYhVeDM-Question 3
The containers have to be the same height so the border is aligned equally.
https://prnt.sc/OkIK1BJP2Xb4Url: https://ontwikkeling.ybrand.nl/
I hope you guys can help me, really struggling with the flex boxes and content rn. Thanks a lot 🙂
Customer Support
Hi there,
lets try this for exampleL
1. Add a Container Block for the section.
2. Insert the Inner Container:
https://docs.generateblocks.com/article/add-inner-container/3. Se you background and padding. etc.
4. with the Inner Container Block selected, Set its Layout > FlexFor questions 1 and 2:
1. Set its Layout > Flex Wrap -> Wrap
2. Set its Layout > Align Items -> Flex End ( bottom ) icon.Now inside the inner Conatiner, add 3 x Container Blocks.
Container 1 and Container 2 set there widths to define two columns eg. 30% and 70%
Container 3 its width should be 100% so it forms its own Row.Now populate container 1 and 2 with your content. You will see that the
Align Items -> Flex End ( bottom )will position the two containers to the bottom.For question 3, same height columns now require you to set the Sizing > Height to
100%on the container.Hey david,
thanks for your explanation it worked!
You’re welcome
- You must be logged in to reply to this topic.
