Archived topic
Unsure which block to use, simple requirements
14 replies · Started by CRAIG on July 5, 2021
Hi folks,
I don't like to put requests on here for things that aren't urgent but I've been trying for a while to produce a section similar to what I have seen on another site and I have so far struggled.
I essentially want to have 3 small boxes which sit in my hero section, horizontally on one line when viewed as desktop
The boxes are simple and just contain an icon with some text below the icon. Both the text and the icon clickable (link).
When viewing on a mobile I want the boxes to fit onto the screen responsively, whether that's 2 boxes on one line with one box sitting centrally below, or if I added 4 boxes then 2 on one line and 2 below, and so on.
I have privately added a link to a site which has pretty much the exact style I am looking for
Could you please make a suggestion as to how this could be tackled?
Best,
Craig
Hi Craig,
The Grid and Container blocks from GB can be used for the layout:
https://docs.generateblocks.com/article/grid-overview/
https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-grid-item
And headline can be used for the icon and content:
https://docs.generateblocks.com/article/headline-overview/
https://docs.generateblocks.com/article/headline-overview/#icon
Hope this helps :)
This is useful, could you suggest the best way to ensure the "boxes" stay the same size regardless of the text contained within them?
I have added some text (link added privately) but as you can see it causes the size of the boxes to be out of alignment with each other
I'm actually seeing the exact same size for all of them:
https://www.screencast.com/t/UhDdfRtvpVNk
At the moment yes but if I decide to put more text in one of them e.g. 3 or 4 words, this will change
Is there a way to prevent this?
You can use the minimum height option:
https://docs.generateblocks.com/article/container-overview/#spacing
So set minimum height a bit bigger than is actually required and then if one of the other boxes uses up more space for text it will still not increase the size of the box - that's quite smart!
Have I understood that right?
The minimum height should be the largest height out of all 3 boxes.
That's what I thought, great stuff, thanks
No problem :)
Actually, Leo, I'm having difficulty setting the minimum height of the boxes
I can set minimum height for the container that the box sits inside but nothing happens regardless of the size I set too
I can set the minimum height of the container which the grid sits inside but again nothing happens
Have I set this up incorrectly?
I have now applied the border to the container around the headline rather than the headline and now I have access to minimum height which makes a difference
Borders and sizing is behaving strangely when I view as mobile device hmm...
Edit - vertical height for the grid wasn't set - should be sorted now
So are we all good here?
yes!
Glad to hear :)
