Centering
Hi guys i want to center something like this, especially the pictures. What is the best way to do it. I gues with cols? Any ideas. Would love to hear it
17 Replies
I'd go grid, 2 columns 1 row, place text in the center.
Then use another grid 2c 2r for the images to achieve the mosaic alignment and use margins on the top and bottom left image to create the odd gaps (use gap for the gaps between the images), with top image spanning 2c
https://codepen.io/z-/pen/zYyMMPa/ad9f3ec0e1773293dffc7dee7cf37e62 I actually went with just shifting the bottom 2 right instead of dealing with margins. Work would need to be done with the responsiveness, it just has a particularly ugly scaling with gap remaining the same
Amazing bro! Ty so much
You know what my problem is, the images from this div getting the same hover effects and stuff like my other ones. And what i try i dont get it fully removed. Can u help me with that? @z- ::theProblemSolver::
In code pen what i wright cmes good so its somewhere in my existing code
Could you send me a link to your existing code as a codepen and I'll have a look
You have
img with height: 400px, remove that (twice)
Also remove margin: 10px
Also the section they're in is height: 100vh make that min-height so it doesn't overflow when narrowIt worked!!!
Only my other images are a bit strange now
Yeah I'd move the
height: 400px to a class and then apply it to the specific images
Keep global styles very minimalSo always class ur images so it wont apply on all right
Also the hover effect is on the last images still
Have a class or some kind of relation in there just so it doesn't apply to all images
How can i make sure there is a space between these two images its also gone now
I'd use grid or flex with a
gap styleWhere should i add that
Im so lost atm lmao
On the container of the images
Chris House
CSS-Tricks
A Complete Guide to CSS Grid | CSS-Tricks
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
Chris Coyier
CSS-Tricks
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
I fixed it with margin left and right
Thanks for all your help!
Now only delete te hover effect from the images in the last section/dev then i made it lol
👍