Hi everyone, this is my first time posting so please go easy on me. I've been struggling to align the buttons at the bottom of my cards to make them look neater. I've tried using flexbox but it doesn't seem to be working. Some people have suggested using grid for vertical alignment instead. Here is my code snippet along with some images to illustrate my issue.
<main>
<div id="main-welcome">
<h1 id="main-title">THIS WILL BE A BIG NONE SWEAR WORD TITLE</h1>
</div>
<section>
<div class="column card-style">
<div class="card-text">
<div id="img-container">
<i class="fa-solid fa-user" style="color: #ff91a4;"></i>
</div>
<div class="title-contain">
<h1 id="cardTitle">About Me</h1>
</div>
<p class="ellipsis">Learn more about me and find links to all my socials you could ever need!</p>
</div>
<div class="wrap">
<button class="button">ABOUT ME</button>
</div>
</div>
<div class="column card-style">
<div class="card-text">
<div id="img-container">
<i class="fa-solid fa-tree" style="color: #ff91a4;"></i>
</div>
<div class="title-contain">
<h1 id="cardTitle">Join the sub server!</h1>
</div>
<!--Add social icon in front of title-->
<p class="ellipsis">
Do you want to join a Minecraft sub server? Of course you do! Register now if it is your first time here! Or add a voucher if your subscription has run out!
</p>
</div>
<div class="wrap">
<button class="button">REGISTER NOW</button>
<button class="button">Add voucher</button>
</div>
</div>
</section>
</main>
CSS
/* css cards */
section {
display: flex;
flex-flow: row wrap;
z-index: 4;
padding-top: 12%;
padding-left: 15%;
padding-right: 15%;
justify-content: center;
flex-shrink: 0;
flex-grow: 1;
}
p, a {
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
nav > div > a {
text-decoration: none;
font-weight: 600;
color: #ff91a4;
}
.title-contain {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: -1rem;
}
#title-img {
width: 2rem;
height: 2rem;
padding-right: 0.5rem;
}
#cardTitle {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 100;
text-transform: uppercase;
font-size: 28px;
}
#img-container {
display: flex;
justify-content: center;
width: 100%;
}
figure {
margin: 0px;
}
figure img {
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
figure img:hover {
opacity: 0.6;
transition: all .3s linear;
}
.column {
box-sizing: border-box;
flex: 1 100%;
justify-content: space-evenly;
margin: 20px;
flex-shrink: 0;
flex-grow: 1;
z-index: 4;
}
.card-style {
background-color: rgb(27, 27, 27);
border-radius: 12px;
border-image-slice: 1;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
transition: all 0.25s linear;
z-index: 4;
}
.card-style:hover {
box-shadow: -1px 10px 29px 0px rgba(0, 0, 0, 0.8);
z-index: 4;
}
.card-text {
color: white;
padding: 20px;
}
@media (min-width: 500px) {
.column {
flex: 0 0 calc(100%/2 - 40px);
}
}
@media (min-width: 900px) {
.column {
flex: 0 0 calc(100%/4 - 40px);
}
}
/*Button css*/
.wrap {
padding-top: 1rem;
padding-bottom: 1rem;
display: flex;
align-items: center;
gap: 1.5rem;
justify-content: center;
}
.button {
width: 140px;
height: 45px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
color: #000;
background-color: white;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
}
.button:hover {
background-color: #ff91a4;
box-shadow: 0px 15px 20px #cf5e71;
color: white;
transform: translateY(-4px);
}
I've tried different methods such as using absolute positions or various flexbox solutions, but nothing seems to work. It either doesn't achieve the desired result or breaks the entire card layout.