3 column preview card component using CSS grid

Community feedback

• 

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  Hello, good job for this project You might want to read the comment below of @stijnmeershoek it's a good tip, And secondly you might add a position absolute for the buttons and postion relative for their parents and then add bottom:10px (that's what i did) so that the button stick in the same position no matter what is the size of the view. Hope it was helpful :)

  0

  ---

  

  Rina•100

  @dodrinPosted over 2 years ago

  @Njoura7 Hey thanks for your feedback. i tried the solution you suggested but the buttons ended up going outside of the cards. It would be nice if you could share your solution on your profile, so I can compare with mine. Cheers!

  0

  

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  @dodrin yess sure, i'll post it this night, I need to finish the documentation first

  0

  

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  @dodrin you can check my solution on my profile, it doesn't look exactly like the design but at least it can help you to fix to border radius & the position of your buttons :D

  1

  

  Rina•100

  @dodrinPosted over 2 years ago

  @Njoura7 Hey Thanks for sharing! I will have a look🙌🙌🙌

  1
• 

  Stijn•460

  @stijnmeershoekPosted over 2 years ago

  To make the container rounded you would need to add a border radius, and then also add overflow: hidden to clip the content with the border radius. And to make overflow hidden work you need to specify a width and height. Example below

  .container {
    width: your width;
    height: your height;
    overflow: hidden;
    border-radius: ?px:
  

  0

  ---

  

  Rina•100

  @dodrinPosted over 2 years ago

  @stijnmeershoek Hi Thank you for your comment. I tried it but it did not resolve the issue unfortunately. I really appreciate your help. Cheers

  0