Kevin Powell - Community•16mo ago

Trying to align the "Check it out" links to the bottom of each card by default

Haven't touched CSS in a few months so I'm super rusty, but decided to work on my portfolio a little bit more.. I'm wanting to have the 3 links sit at the bottom of the card, and really, any future links to sit there too. They all have the class of "project-link" and the below CSS is what has been input so far for the projects section

.projects {
  background-color: #E4E8FF;
  background-size: cover;
  padding: 3rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.projects h2 {
  text-align: center;
  margin-bottom: 3rem;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2rem;
}

.project-card {
  background-color: transparent;
  box-shadow: 4px 4px 4px 5px rgba(0,0,0,0.2);
  text-align: center;
  padding: 2rem;
  border-radius: 10px;
}

.project-card img {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.projects {
  background-color: #E4E8FF;
  background-size: cover;
  padding: 3rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.projects h2 {
  text-align: center;
  margin-bottom: 3rem;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2rem;
}

.project-card {
  background-color: transparent;
  box-shadow: 4px 4px 4px 5px rgba(0,0,0,0.2);
  text-align: center;
  padding: 2rem;
  border-radius: 10px;
}

.project-card img {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

3 Replies

CDL•16mo ago

whilst I'm at it, when you shrink this to mobile view, the cards go edge to edge, I'd still like a slight gap on either side of the cards, but not really sure how I implement that?

vince•16mo ago

I'm not sure which class is your product information container, but you could make that a flex and have justify-content: space-between and it would have even space between all items in your container, thus putting your links at the bottom. You could also make it position: absolute. Probably a better way than what I mentioned though Oh I see, you're using grid for your project info container. Try giving that a height of 100 and see if it expands to take up all the available card space Though honestly I quite like the differing heights, I think it would look good if you made the cards heights different as well. Looks good so far tho!

CDL•16mo ago

Thanks for the tips Vince 🙂 i'll have a tweak with it and see what I come up with

Gaming

Programming

Trying to align the "Check it out" links to the bottom of each card by default