Flebox cards

Hello guys. I need help troubleshooting this weird behavior. On mobile I set the container to flex, justify space between and wrap. The the flex items set flex-basis: calc(50% - 20px) but some items stretches to 100%
No description
6 Replies
Jochem
Jochem9mo ago
it's going to be hard to diagnose without access to the code. Codepen is a good, free way to share code, though you'll have to sign up and use placeholder images with something like https://picsum.photos. Github pages or any other live version works well too
Lorem Picsum
Lorem Picsum
Lorem Ipsum... but for photos
Olimpio Adolfo
Olimpio Adolfo9mo ago
Aficans Who Design
A platfom dedicated to promoting and showcasing the incredible talents of African designers in technology and related areas.
Olimpio Adolfo
Olimpio Adolfo9mo ago
Here is link of the website Right in the homepage the issues appear I'm using webflow
Jochem
Jochem9mo ago
it's happening because the profile name has nowrap on it, with a width of fit-content. basically any time the cards get narrow enough that the entire name can't fit on one line, flex is deciding to put it on its own, which pushes its row-mate to a new row as well for some reason. Removing width: fit-content; white-space: nowrap; from .profile-name seems to solve it, at least until the screen gets narrow enough that either first or last name won't fit anymore
Olimpio Adolfo
Olimpio Adolfo9mo ago
Thanks a lot. Lemme try changing it.
MarkBoots
MarkBoots9mo ago
in this scenario it might be worth trying grid with grid-template-columns repeat(auto-fit or auto-fill, ...). Then you can get rid of some of your mediaqueries
Want results from more Discord servers?
Add your server