3-column-card

Community feedback

• 

  Luka•820

  @LukaKobaidzePosted almost 3 years ago

  Hello! on the <a>Learn More</a> element, instead of using some specific value margin-top: 12rem, you can use margin-top: auto, this will push the element to the bottom of the container, from there use margin-bottom: some value.

  This will prevent element from overflowing.

  Marked as helpful

  1

  ---

  

  Rumer Tovar•80

  @Rtf747Posted almost 3 years ago

  @LukaKobaidze Wow! That was very helpful! I spent some time trying to align all three <a>. I still don't really know when to use "auto" measures. I have to keep practicing. Thanks a lot!

  0
• 

  Candela Bramucci•680

  @bramuccciPosted almost 3 years ago

  Hi rummer! If you see your solution on a screen of 1024px (like mine) you will see that the buttons get out of the card. I think I can help with that.

  • First, do *{ margin: 0, padding: 0} . With that you can work better with the spacing.
  • Remove the grid-template-rows of your container. Just leave the grid-template-colums: 1fr
  • Put the background in the cards, and no in the div inside them. Then, add a padding. With this structure you can adjust the elements like header, img, etc.
  • I see that you use react. I recommend to go back to the bases with only css and html. Keep coding!

  Marked as helpful

  1

  ---

  

  Rumer Tovar•80

  @Rtf747Posted almost 3 years ago

  @bramuccci I don't know what happened to me, but that grid is very bad for me, I'm going to try to follow your recommendations to see if I do much better on the second try! Thank you so much!

  1