Aligning Elements with CSS -- Help please!

Aligning Elements with CSS -- Help please!
0

#1

Hello,

I’m hoping someone here can help me. I’m trying to get some links/icons to align to the bottom of the “cards” that they’re on. I’m not sure what to do with the CSS to make that happen. At the moment they are all spaced irregularly. Ideally they’d all be at the bottom of the card, like this:
37%20PM

Here is the Github and here is the deployed site, so you can see what I mean.

Thanks! :smiley:


#2

hello franceska

for .project-tile add position:relative;
and .project-link
{position: absolute;
bottom:0;
width:100%;
}

but there are many ways to do it
theres a typo on ‘Origianlly’


#3

Added to what @cow has said,

.project-tile {
    position: relative;
    padding-bottom: 4rem;
}
.project-link {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#4

@cow and @Sujith3021 thank you very much for your help!


#5

You are welcome… :slight_smile: