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
No description
17 Replies
Zoë
Zoë14mo ago
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
Boeroe
Boeroe14mo ago
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::
Boeroe
Boeroe14mo ago
No description
Boeroe
Boeroe14mo ago
In code pen what i wright cmes good so its somewhere in my existing code
No description
Zoë
Zoë14mo ago
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 narrow
Boeroe
Boeroe14mo ago
It worked!!! Only my other images are a bit strange now
Zoë
Zoë14mo ago
Yeah I'd move the height: 400px to a class and then apply it to the specific images Keep global styles very minimal
Boeroe
Boeroe14mo ago
So always class ur images so it wont apply on all right Also the hover effect is on the last images still
Zoë
Zoë14mo ago
Have a class or some kind of relation in there just so it doesn't apply to all images
Boeroe
Boeroe14mo ago
How can i make sure there is a space between these two images its also gone now
No description
Zoë
Zoë14mo ago
I'd use grid or flex with a gap style
Boeroe
Boeroe14mo ago
Where should i add that Im so lost atm lmao
Zoë
Zoë14mo ago
On the container of the images
Zoë
Zoë14mo ago
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.
Zoë
Zoë14mo ago
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.
Boeroe
Boeroe14mo ago
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
Zoë
Zoë14mo ago
👍
Want results from more Discord servers?
Add your server