Design comparison
Solution retrospective
In the preview pictures some of the borders had a border-radius. I tried to add border-radius as well, for the mobile version is looked great, but as soon it went to desktop screen, it still had the border-radius from the mobile screen. I don't know how to not keep the border-radius from the mobile version to desktop...
Community feedback
- @ohsitePosted about 3 years ago
Hi, The reason why you can not use border-radius properly is because, your rows are stacking. It's happening because of using bootstrap, try use custom media-queries instead. Check my solution, when screen is getting smaller they just shrink but not stack. In your case when you use border-radius on main element you will get to the point, when top if it is 2 cards and bottom of it is 1 card, so I'm guessing 2 top cards gonna have rounded corners, bottom one is not going to have those at all. Keep up the good work!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord