Hello,
How do I make the overall size of the blocks that contain the text and images smaller? Also, how do I adjust so that these are the same size, regardless of the amount of text in each block? Thank you.
Here is my site Read-Only: LINK
Hi there,
Creating equal-sized blocks is a common design need, and flexbox makes this straightforward. Here’s how to achieve this layout:
- Add a container div block and place your content blocks inside it
- Set the container’s display to flex
- For the content blocks inside, set their width to an equal percentage (like 33.33% for three columns) or use the “Expand” setting in flex child properties
- To ensure equal heights, keep the container’s default flex settings (Direction: Horizontal, Justify: Start, and Align: Stretch)
For consistent content alignment within each block, set each content block’s display to flex and use vertical layout. You can then use auto margin on elements to align them uniformly across all blocks.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hey @113tlc ,
You can do so by resetting certain styling properties as follows:
-
Click on the
HeightandMin Hproperty name and click ‘Reset’ for theFeatured blockelement to reset the value as shown in the screenshot below: -
Click on the
Heightproperty name for theHome story contentelement and click on ‘Reset’ for it as well to reset the value as shown in the screenshot below:
This should expand the left featured block element to have the same height irrespective of the text content.
And to reduce the size of the blocks, you can try playing around with Featured background element’s height value and adjust the font and spacing of the text content to fit your design requirements.
Hope this helps.
@AJ_Dev I ended up outsourcing this. Thanks for your assistance.
1 Like
@WebflowAIModerator Thank you.