- This topic has 19 replies, 3 voices, and was last updated 2 years, 5 months ago by
.
-
Posts
-
Hello,
I hope you’re doing well! I’m trying to create a simple content layout under my hero section, as shown in this example:
https://www.awesomescreenshot.com/image/38851750?key=b4c2329e3f839c8735409e4a6d0c2a3e
Could you please advise me on the proper structure to achieve this layout and make it responsive? I’m wondering which elements I should use, such as containers, sub-containers, grids, headlines, etc.
I appreciate your guidance and support. Looking forward to your response!
Customer Support
Hi there,
The layout can be achieved using a structure like this:
- container (set max-width/paddings, display:flex, align-items:top) -- container left (flex-basis: 40%) --- headline -- container right (flex-basis: 60%) --- headline title --- paragraphHi Ying,
I appreciate all the help you’ve provided so far! However, I’m still having some difficulties understanding the Flex property and setting it up in Generate Blocks. I need assistance with configuring “flex-basis: 40%” for the sub-container and aligning items at the top for the main container (setting max-width/paddings, display:flex, align-items:top).
Plus what values should I insert for the padding in percentage or pixels?
Could you please take a look at my development site and provide some guidance on how to achieve this? Here’s the link: https://wordpress-273320-3083586.cloudwaysapps.com/home-page
Thank you so much for your support!
I need assistance with configuring “flex-basis: 40%” for the sub-container and aligning items at the top for the main container (setting max-width/paddings, display:flex, align-items:top).
This is the documentation of the layout panel:https://docs.generateblocks.com/article/layout-options-overview/
For specific properties:
Flex-basis:https://docs.generateblocks.com/article/layout-options-overview/#flex-child
Flex options:https://docs.generateblocks.com/article/layout-options-overview/#flexPlus what values should I insert for the padding in percentage or pixels?
It depends on your design, I personally prefer 40px left/right padding for the desktop, 30px for tablet and 20px for mobile.
Could you please take a look at my development site and provide some guidance on how to achieve this?
Use
Rowas theflex-directionfor the parent container.Thanks for your answer!
I’m trying to align the content more in the center and set a max-width for the parent container. However, when I set the max-width (e.g., 1200px), the content of the two columns aligns to the left instead of the center.
Should I add another container on top of the existing containers with a max-width? Here’s the layout I’m aiming for: https://thefashionglobe.com/. And this is what I currently have: https://wordpress-273320-3083586.cloudwaysapps.com/home-page
Please note, “about us” is aligned with the logo of the site and the paragraph seems to be aligned right in the center.
Your help is greatly appreciated!
Thank you!
Customer Support
Hi there,
when you add a Container Block to the top level of the page, in the blocks toolbar you will see an option to Insert Inner Container Block:
https://docs.generateblocks.com/article/add-inner-container/
Click that, its a shortcut, what it does is:
1. adds a Container Block inside
2. it sets that Containers > Sizing > Max Width to the Global Width
3. it sets that Containers > Spacing > Margin Left & Right toautowhich is what centers that container inside its full width parent.Make this inside container your Layout > Flex Container and move your content inside that
Great! I’ve made progress with the horizontal alignment, thanks to your guidance. However, I’m facing an issue with the vertical alignment on the dev site. Currently, the content of both columns is aligned at the top. If I use flex center, it aligns both the “About Us” section and the paragraph vertically in the center.
I would like the “About Us” section to be aligned at the top, while the paragraph is centered vertically. Please check the link to the layout I’m aiming for that I posted previously to better understand what I’m looking for!
Gracias.
The inner Container that you set the Layout to Flex, in the Layout settings you can set the Align items to Flex Start
Are you referring to this container: https://tinyurl.com/26m9qtly
You can see that the Flex is set to Start but the content is still not aligned like what I’d like to achieve: https://wordpress-273320-3083586.cloudwaysapps.com/home-page
Sorry, I might be missing something! 🙂The alignment looks to match the screenshot in your original post.
Now you just need to teak the typography of the headlines and paragraphs.
Are you referring to this container: https://tinyurl.com/26m9qtly
You can see that the Flex is set to Start but the content is still not aligned like what I’d like to achieve: https://wordpress-273320-3083586.cloudwaysapps.com/home-page
Sorry, I might be missing something! 🙂I repeat, as it seems that Ying has misunderstood me!:) Here’s the layout I’m aiming for: https://thefashionglobe.com/. And this is what I currently have: https://wordpress-273320-3083586.cloudwaysapps.com/home-page
On your Elementor site, the about us section width is 30%, the text section is 47.846%, to have an exact match, you can change the
flex-basisto these 2 values.Then add some padding on top of the container, it looks pretty much the same to me.
Then add some padding on top of the container, it looks pretty much the same to me.
On top of which containers precisely should I add the padding?
Hello,
I managed to add padding to the top using the inner container, but I’m not sure if this is the best approach with all the flex options available. Could you please let me know in case there’s a better way?
Additionally, I’d like to add a small red divider under the “About Us” section. What would be the best approach to achieve this using GenerateBlocks?
Thank you once again for your ongoing support! It’s truly appreciated.
- You must be logged in to reply to this topic.
