@correlucas
Posted
👾 Ciao Vittorio, congratulations for your new solution!
Overall your solution seems fine, I like that's responsive too.
There's only one detail you can improve, to keep it super responsive. Note that after 240px, the container doesn't keep all the information inside it because there's padding holding the container, but not the text, so the text and button pop out the container. You can fix it adding a smaller padding with a media query. Example below:
@media (max-width: 260px) { .card { padding: 1.5rem; }}
Try your solution with devtools and pay attention to the mobile version, then you'll see the content break after 240px.
Hope it helps, congrats! Happy coding.
Marked as helpful
@VittorioDL
Posted
@correlucas Thank you so much for the feedback, I really appreciate that and it helps me to get better. Just one more question: below 240px the content still gets out of container. Is it possible to make it responsive even at this small width or is it unnecessary?
@correlucas
Posted
@VittorioDL I get why this is happening, you've this unnecessary property overflow: hidden; instead of that, apply border radius to each card (note that the center card doesn't need rounded borders)
.card__container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
max-width: 900px;
margin: 5rem 2rem;
border-radius: 0.7rem;
/* overflow: hidden; */
}
Marked as helpful
