So I'm building cards for products but because some of the height of the product is bigger the See offer button doesn't go to the bottom.
Here are some images as an example of my problem
I changed the background to blue so it's better to visualize the problem. As you can see in the first card the title is a bit shorter making the button not be at the bottom like in image 2.
Here is my code
<style>body {
position: relative;
}
.see_offer {
height: 50px;
background-color: black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.see_offer span {
position: relative;
left: calc(50% - 39.93px);
top: calc(50% - 9.2px);
color: white;
}
.trustpilot-widget {
margin-top: 4em;
}
.main-body {
max-width: 1270px;
font-family: "Ubuntu", sans-serif;
margin: 0 auto;
}
.page-content {
padding-top: 10px;
position: relative;
margin: 0 auto;
}
.page-content .container {
display: flex;
justify-content: space-evenly;
}
.page-content .first-section .carousel-cell {
width: 100%;
border-radius: 7px;
}
.page-content .first-section .carousel-cell img {
width: 100%;
}
.page-content .second-section {
padding-top: 131px;
}
.page-content .second-section .title {
display: flex;
}
.page-content .second-section .title span {
font-family: "Segoe UI Regular";
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 64px;
letter-spacing: 0.21em;
margin: 0 auto;
position: relative;
}
.page-content .second-section .title span::after {
content: "";
display: block;
position: absolute;
border: 2px solid #1D1D25;
border-radius: 20px;
width: 96%;
top: 76px;
left: 0;
}
.second-section .products {
padding-top: 115px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.second-section .products .box {
max-width: 260px;
width: 260px;
background-color: #F7F7F7;
margin-bottom: 62px;
}
.second-section .products .box .image {
text-align: center;
padding-top: 30px;
padding-bottom: 25px;
min-height: 157px;
display: flex;
align-items: center;
justify-content: center;
}
.second-section .products .box .image img {
max-width: 200px;
}
.second-section .products .box .names {
text-align: center;
font-size: 18px;
line-height: 21px;
padding-bottom: 21px;
margin-left: 10px;
margin-right: 10px;
}
.second-section .products .box .star {
text-align: center;
padding-bottom: 17px;
}
.second-section .products .box .price {
text-align: center;
padding-bottom: 21px;
color: #1D1D25;
font-weight: bold;
}
.second-section .products .box .price span:nth-child(1) {
font-size: 16px;
line-height: 18px;
vertical-align: super;
}
.second-section .products .box .price span:nth-child(2) {
font-size: 24px;
line-height: 28px;
}
.second-section .pagination-container {
display: flex;
justify-content: center;
margin-top: 15px;
}
.second-section .pagination-container span,
.second-section .pagination-container a {
color: #1D1D25;
background: none;
box-shadow: none;
border-width: 0;
font-size: 14px;
margin-right: 0;
}
.second-section .pagination-container .active .current {
border-radius: 0;
border-bottom: 1px solid #1D1D25;
}
.second-section .pagination-container li .page-link {
border-radius: 0;
border-bottom: 1px solid #C4C4C4;
}
.second-section .pagination-container .current.prev,
.second-section .pagination-container .current.next,
.second-section .pagination-container .page-link.prev,
.second-section .pagination-container .page-link.next {
display: flex;
align-items: center;
border-width: 0;
}
.second-section .pagination-container .prev-image {
margin-right: 12px;
}
.second-section .pagination-container .next-image {
margin-left: 12px;
}
.page-content .third-section {
padding-top: 90px;
max-width: 1050px;
margin: 0 auto;
background-color: #F9FBFC;
border-radius: 16px;
margin-top: 110px;
}
.page-content .third-section .container {
display: block;
}
.page-content .third-section .container .text {
margin: 0 auto;
text-align: center;
}
.page-content .third-section .container .text .title {
font-size: 24px;
font-weight: bold;
color: #1D1D25;
margin-bottom: 23px;
}
.page-content .third-section .container .text .sub-title {
font-size: 24px;
color: black;
margin-bottom: 55px;
}
.page-content .third-section .container .subscribe-bar {
text-align: center;
padding-bottom: 119px;
display: flex;
justify-content: center;
}
.page-content .third-section .container .subscribe-bar input {
font-size: 20px;
padding: 22px;
background-color: #F4F3F3;
border-radius: 7px;
border-width: 0;
width: 400px;
}
.page-content .third-section .container .subscribe-bar input::placeholder {
color: #B7B6B6;
}
.page-content .third-section .container .subscribe-bar a {
background-color: #F81732;
color: white;
padding: 22px 32px;
border-radius: 0px 7px 7px 0px;
}
@media screen and (max-width: 1440px) and (min-width: 1360px) {
.second-section .products {
padding-left: 50px;
padding-right: 50px;
}
}
@media screen and (max-width: 1023px) and (min-width: 769px) {
body {
background-size: cover;
}
.page-content {
padding-top: 10px;
width: calc(100% - 5em);
}
}
@media screen and (max-width: 768px) {
body {
background-size: cover;
}
.third-text {
text-align: center;
}
.page-content {
padding-top: 10px;
}
.page-content .first-section .container {
flex-direction: column;
border-radius: 0;
padding-top: 45px;
padding-bottom: 50px;
}
.page-content .first-section .container::after {
content: "";
background-image: url('../assets/images/frame.png');
background-repeat: no-repeat;
opacity: 0.2;
top: 20px;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-size: 300px 180px;
background-position: top right;
}
.page-content .first-section .container .left {
order: 1;
padding-left: 9%;
}
.page-content .first-section .container .left .first-text {
font-size: 12px;
}
.page-content .first-section .container .left .second-text {
padding-left: 0em;
font-size: 22px;
line-height: 25px;
margin-top: 6px;
}
.page-content .first-section .container .left .third-text {
font-size: 12px;
text-align: left;
margin-top: 10px;
}
.page-content .first-section .container .left .btn-red {
display: none;
}
.page-content .first-section .container .right img {
display: none;
}
.page-content .second-section {
padding-top: 30px;
}
.second-section .products {
padding-top: 35px;
}
.second-section .products .box {
width: 48%;
margin-bottom: 5px;
}
.page-content .second-section .title span {
font-size: 25px;
}
.page-content .second-section .title span::after {
top: 60px;
}
.page-content .second-section .container {
flex-direction: column;
}
.page-content .second-section .left {
order: 1;
padding-right: 0px;
padding-top: 45px;
margin-left: 0px;
}
.page-content .second-section .left img {
width: 100%;
}
.page-content .second-section .right {
padding-right: 0px;
font-size: 14px;
}
.second-section .products .box .image {
height: 100px;
padding-top: 20px;
padding-bottom: 10px;
}
.second-section .products .box .image img {
max-width: 170px;
max-height: 100px;
}
.second-section .products .box .names {
font-size: 13px;
line-height: 15px;
padding-bottom: 13px;
}
.second-section .products .box .star {
padding-bottom: 11px;
}
.second-section .products .box .price {
padding-bottom: 18px;
}
.second-section .products .box .price span:nth-child(1) {
font-size: 14px;
line-height: 18px;
}
.second-section .products .box .price span:nth-child(2) {
font-size: 18px;
line-height: 21px;
}
.page-content .third-section {
margin-top: 100px;
width: 90%;
padding-top: 33px;
}
.page-content .third-section .container .text {
padding-bottom: 0px;
}
.page-content .third-section .container .text .title {
font-size: 21px;
margin-bottom: 16px;
}
.page-content .third-section .container .text .sub-title {
font-size: 19px;
padding-top: 0px;
margin-bottom: 20px;
}
.page-content .third-section .container .subscribe-bar {
padding-bottom: 60px;
}
.page-content .third-section .container .subscribe-bar input {
font-size: 13px;
padding: 13px;
border-radius: 7px;
border-width: 0;
width: 50%;
}
.page-content .third-section .container .subscribe-bar a {
padding: 13px 20px;
border-radius: 0px 7px 7px 0px;
}
.page-content .third-section .container .board-container {
flex-direction: column;
}
.page-content .third-section .container .board-container .board {
width: auto;
margin: 15px 8px;
}
}
.user-info,
.user-info .icon {
display: flex;
align-items: center;
}
.header .user-info .text {
font-size: 14px;
color: #55555b;
text-align: right;
padding-right: 14px;
}
</style><!-- Common.js code --><style>body,
html {
margin: 0;
padding: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
/* make scrollbar transparent */
}
@font-face {
font-family: "Segoe UI Regular";
font-style: normal;
font-weight: normal;
src: url("../assets/fonts/Segoe UI.woff") format("woff");
}
@font-face {
font-family: "Segoe UI Italic";
font-style: normal;
font-weight: normal;
src: local("Segoe UI Italic"), url("../assets/fonts/Segoe UI Italic.woff") format("woff");
}
@font-face {
font-family: "Segoe UI Bold";
font-style: normal;
font-weight: normal;
src: local("Segoe UI Bold"), url("../assets/fonts/Segoe UI Bold.woff") format("woff");
}
@font-face {
font-family: "Segoe UI Bold Italic";
font-style: normal;
font-weight: normal;
src: local("Segoe UI Bold Italic"), url("../assets/fonts/Segoe UI Bold Italic.woff") format("woff");
}
</style><section class="second-section">
<div class="title">
<span>Popular</span>
</div>
<div class="products">
<div class="box" v-for="product in products" :key="product.id">
<div class="image">
<img :src="product.image" />
</div>
<div class="names">
Soy Protein 90 (Isolate) Unflavoured 2kg
</div>
<!--
<div class="star">
<i class="fa fa-star color-yellow" aria-hidden="true"></i>
<i class="fa fa-star color-yellow" aria-hidden="true"></i>
<i class="fa fa-star color-yellow" aria-hidden="true"></i>
<i class="fa fa-star color-yellow" aria-hidden="true"></i>
<i class="fa fa-star color-gray" aria-hidden="true"></i>
</div>
-->
<div class="price">
<span>GBP</span><span>29.99</span>
</div>
<a :href="product.url">
<div class="see_offer">
<span>SEE OFEER</span>
</div>
</a>
</div>
<div class="box" v-for="product in products" :key="product.id">
<div class="image">
<img :src="product.image" />
</div>
<div class="names">
Whey Protein 80 (Concentrate) Unflavoured 500g
</div>
<!--
<div class="star">
<i class="fa fa-star color-yellow" aria-hidden="true"></i>
<i class="fa fa-star color-yellow" aria-hidden="true"></i>
<i class="fa fa-star color-yellow" aria-hidden="true"></i>
<i class="fa fa-star color-yellow" aria-hidden="true"></i>
<i class="fa fa-star color-gray" aria-hidden="true"></i>
</div>
-->
<div class="price">
<span>GBP</span><span>29.99</span>
</div>
<a :href="product.url">
<div class="see_offer">
<span>SEE OFEER</span>
</div>
</a>
</div>
</div>
<div id="pagination-container" class="pagination-container"></div>
</section>So my question is there any way I could make it always 0px from the bottom of the div?
