Skip to content
Submitted almost 3 years ago

3 column preview card

Klaudija✧˖*°࿐•130
@klaudij
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

  • Adrian•190
    @ohsitePosted almost 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 helpful
    0

Please log in to post a comment

Log in with GitHub

Join 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