3-column preview card component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Flivaxa, yes, it's possible to use position: absolute to position the <a> tags; the tricky thing with that is you could run into responsive issues if screen sizes change since the element doesn't move, but you might be able to fix that if you use responsive properties such as max-width or min-width. Still, you might find yourself needing to make other elements accommodating to position: absolute, like that extra margin below your paragraph elements, which I think is a bit of an overkill. Personally I prefer to use flexbox just because I find it easier to place elements, and it takes care of responsiveness usually. In your case, I'd just put a flex box on the parent like this and make other changes to the p and a:

  .card {
    display: flex;
    flex-direction: column;
    height: 30rem;  // or min-height if you prefer
  }
  .card p {
    margin-bottom: 1rem;
    flex: 1; // this tells flexbox to stretch the element to fill the remaining space
  }
  .card a {
    align-self: flex-start
    // remove the position: absolute; and bottom:40px;
  }
  

  I'm not sure how much you know about flexbox already, but in case you're just starting out, I encourage you to just keep using it and experimenting with it. It took me awhile to figure it out as well, but once you do, you'll see how powerful of a tool it is. Good luck, and keep coding! :)

  Marked as helpful

  1