Hi, so I have a media query in the “portfolio” section of my Portfolio project to set the “cards” to two per row rather than four (20% width to 40% width), but it isn’t working at the moment. It worked fine until I added the #allCards {display: flex} to the portfolio section, so I’m assuming it has something to do with that but I haven’t been able to figure it out. Any thoughts or ideas would be greatly appreciated! Project: https://codepen.io/MarcelPenn/pen/voWNqG?editors=1100
Congratulations on having completely fluid with cards. But isn’t there a point that they get too skinny? I suggest each card have a minimum width to maintain certain proportions. The way I’d do it with or without flexbox is to have a container that holds all four cards then a container that hold two cards each. Four across is flex-direction:row; on the 4-card container and the pair container. For two across, the 4-card container changes to flex-direction:column;. Then on a single card column all containers are flex-direction:column:
1 Like
Thanks. Yeah that’s exactly the issue I’m trying to solve. Just about to head out on a break but am going to try to implement your suggestion when I get back. I think I get what you’re saying lol. Appreciate the help and feedback!
So I was actually able to solve the problem using “flexwrap: wrap” on the container and the media query, and making the width of each card wider within the media query.