Flex container issue
Hi, I have a problem with a flex container
info-cards with flex-wrap active. The container has 3 cards that by default are on the same row, but if the vw gets too small they break in other rows. The problem is that when this happens the width of the container keeps on being 100% while I'd need it to just fit its content so that it can stay horizontally centered. I can fix it using media queries but I'd rather have a cleaner code. Here's the codepen: https://codepen.io/uzhas/pen/gOqwXGm15 Replies
Do you just want the cards to appear centered?
Since
.info-cards isn't visible, I think setting justify-content: center on .info-cards will give you the layout you're looking for even though it's technically still 100% of its parent's width.
I forked your pen and added this plus a bottom margin on .card to accommodate the negative bottom margin on .card-content.
https://codepen.io/VAggrippino/pen/ExrgepZ
I don't think I'd agree that code without media queries is cleaner 😅
Thank you!
I had a lot of trouble with my last project making it responsive (16+ media queries) because I didn't use the right CSS properties like max/min... So this project I'm trying to make it the most responsive as possible when I'm writing the style. I tried using some properties and even clamp for font-sizes and I can see that, despite something like the nav that has to be replaced with an hamburger, it's turning out pretty well so far
Hey @VinceAggrippino , do you know why my columns are not filling up the entire height available? If you need code I'll provide it
Look at that yellow border, you have padding on your element
I have padding on my container but not on my columns
even if I remove it, the columns still have different heights
Oh I see. I'd have to see the code
Sure, give me a minute
Can you put it in a codepen?
Sure
Unfortunately I couldn't find a way to post svgs online but it shouldn't be too much of a problem. https://codepen.io/uzhas/pen/bGzBEBx?editors=1100
Ah I was sitting there for a while confused why it wasn't working 😂
It's because you have
align-items: start on your footer
You can then remove height: 100% and justify-content: center from your .columnPro tip: use dev tools, makes it so much easier.
I find a lot of my and others' issues are because of excess styling, so being able to remove/change/add styles from devtools is really useful
Thank you!