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%
6 Replies
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
Aficans Who Design
A platfom dedicated to promoting and showcasing the incredible talents of African designers in technology and related areas.
Here is link of the website
Right in the homepage the issues appear
I'm using webflow
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 anymoreThanks a lot. Lemme try changing it.
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