3 Card working with rounded corners changing

Community feedback

• 

  P

  Marge C.•440

  @msunji

  Posted about 3 years ago

  Heya! Great job finishing this project 👍

  Reading documentation isn't always the easiest, and I totally get that. But I think you're already moving in the right direction by putting what you've read into practice with this project. I guess all I can say is that it'll take a bit of time, a bit of patience, and sometimes a lot of looking things up on Google and Stack Overflow 😅 Don't worry about it too much if you don't get it the first time around.

  Now about the corners. It seems like Bootstrap's Card component comes with rounded corners out of the box. You'll want to change it up a bit with the rounded-0 utility class to remove all the rounded corners. Then, in styles.css, you're going to need to do some custom code and media queries to set the rounded corners depending on their location (and screen size). You'll end up with something like this, for instance:

  .sedan {
    border-radius: 12px 12px 0 0;
  }
  
  @media (min-width: 600px) {
    .sedan {
      border-radius: 12px 0 0 12px;
    }
  }
  

  I'm not super well versed in Bootstrap, so there might be other solutions out there, but I hope this helped regardless!

  11

  Marked as helpful