Hi all,
Hope someone can help me, I’m trying to use flex to create a layout with box’s. although when I add any content to a box it pushes it all out align. Am I doing something wrong?
p.s it took me ages to get the content inside the div aligned up haha
Here is my site Read-Only:
Do you want the boxes to be the same width height?
Try using ONE class for box 1 box 2 box 3 etc…because you want all those four boxes to be the same: 50% Width / 100% height. And they are in the same “parent” container , a " Content Block".
And this is tipycally a layout that would be easier to create with grid. Hope that helps !
You didn’t give any width or height to these boxes that’s why they react strangely (I think). Try to name it Content Block Box and give it 50% Width / 100% HEight.
THEN , if you want to have a bg image ton one , you can add a second class to this particular box (example: “Content Block Box” + “2” )
And so your boxes have the same code characyteristics and for the “tiny differences” you had another class.
Yes I want he 4 boxes to all be the same size.
@leetch Thanks for response, I tried to add % to the boxes but wont let me?
Cheers
A solution is to put all boxes in 1 content block. Make the content block a grid with 2 col and 2 row all 1fr. Set content block height to 100%.