Single price grid component

Community feedback

• 

  Ivan•245

  @PeresvetIvanPosted over 4 years ago

  Hello, Dulce! You can set border-radius to parent element (grid container in this case), and also set 'overflow: hidden'. This way, all child elements will not go beyond the parent element, which means that all their corners will be cut automatically according to the border-radius property on the parent element.

  0

  ---

  

  Dulce•115

  @iamdulcePosted over 4 years ago

  @PeresvetIvan Oh I didn't think of using overflow, I'm going to try it right now! Thanks!

  0

  

  Ivan•245

  @PeresvetIvanPosted over 4 years ago

  you're welcome)

  0
• 

  Diarrah•3,418

  @DiarrahPosted over 4 years ago

  There's definitely a way to get each corner of a grid rounded. Just have a container (set to display grid) & then put a border-radius on that whole container.

  0

  ---

  

  Dulce•115

  @iamdulcePosted over 4 years ago

  I tried this way, but for reason was only taken by the container and not the items inside:/

  0
• 

  Nic•595

  @nicm42Posted over 4 years ago

  This looks great, I like it.

  Only small thing is that setting width of 350px on mobiles will be a problem for anyone with a mobile smaller than that (the smallest iPhones are 320px).

  0

  ---

  

  Dulce•115

  @iamdulcePosted over 4 years ago

  So glad you liked it! And thanks for the info about screen size, I'll have it in mind to make it right in the next project

  0
• 

  Rajesh V R•30

  @vr3372Posted over 4 years ago

  Hi Dulce

  Yes you are correct.Its like three div & give border-radius seperatly.

  0

  ---

  

  Dulce•115

  @iamdulcePosted over 4 years ago

  Thanks for your answer!

  0