I have a card that I'm trying to get the button to go to the bottom of the card to match the card next to it using the equalizer from Foundation. I have the equalizer working on the card's background but have been unsuccessful in getting it to work on the button. I tried doing the nesting solution it gives in their documentation but was unsuccessful. How can I get my button to match the height of other card?
Here is my code:
.grid {
display: grid;
width: 100%;
max-width: 80rem;
margin: 0rem auto;
padding: 1rem;
grid-template-rows: auto;
list-style: none;
grid-template-columns: repeat(2, 1fr);
}
.test-card {
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
}
.grid-col {
display: block;
grid-row-end: span 1;
grid-column-end: span 1;
position: relative;
}
.test-card-body {
padding: 20px;
background-color: #fff;
max-width: 85%;
margin-top: -6.375rem;
position: relative;
z-index: 1;
}
.container {
/* max-width: 80rem; */
padding: 1rem;
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
}
body {
background-color: #efefef;
}
.button {
background-color: grey;
color: white;
border: none;
padding: 5px;
}<div data-equalizer="x0bwi9-equalizer" data-events="mutate" data-mutate="x0bwi9-equalizer" data-resize="x0bwi9-equalizer">
<div ><img alt="" src="https://i.ibb.co/M8TXxQ5/Untitled-1.jpg" />
<div data-equalizer-watch="" style="height: 342px;">
<h2>Text</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<div>
<p style="text-align: center;"><button >Button</button></p>
</div>
</div>
</div>
<div ><img alt="" src="https://i.ibb.co/M8TXxQ5/Untitled-1.jpg" />
<div data-equalizer-watch="" style="height: 342px;">
<h2>Text</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<div>
<p style="text-align: center;"><button >Button</button></p>
</div>
</div>
</div>
</div>CodePudding user response：
I am not sure if you are looking for something like this.
.TempClass {
text-align: center;
position: absolute;
bottom: 0px;
left: 50%;
}
I added the above-given css to get the button to go to the bottom of the card
.grid {
display: grid;
width: 100%;
max-width: 80rem;
margin: 0rem auto;
padding: 1rem;
grid-template-rows: auto;
list-style: none;
grid-template-columns: repeat(2, 1fr);
}
.test-card {
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
}
.grid-col {
display: block;
grid-row-end: span 1;
grid-column-end: span 1;
position: relative;
}
.test-card-body {
padding: 20px;
background-color: #fff;
max-width: 85%;
margin-top: -6.375rem;
position: relative;
z-index: 1;
}
.container {
/* max-width: 80rem; */
padding: 1rem;
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
}
body {
background-color: #efefef;
}
.button {
background-color: grey;
color: white;
border: none;
padding: 5px;
}
.TempClass {
text-align: center;
position: absolute;
bottom: 0px;
left: 50%;
}<div data-equalizer="x0bwi9-equalizer" data-events="mutate" data-mutate="x0bwi9-equalizer" data-resize="x0bwi9-equalizer">
<div ><img alt="" src="https://i.ibb.co/M8TXxQ5/Untitled-1.jpg" />
<div data-equalizer-watch="" style="height: 342px;">
<h2>Text</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<div>
<p style="text-align: center;"><button >Button</button></p>
</div>
</div>
</div>
<div ><img alt="" src="https://i.ibb.co/M8TXxQ5/Untitled-1.jpg" />
<div data-equalizer-watch="" style="height: 342px;">
<h2>Text</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<div>
<p style="text-align: center;"><button >Button</button></p>
</div>
</div>
</div>
</div>CodePudding user response：
The problem is, that you are added inline style to your test-card-body class with a fixed height. Remove the inline style: <div data-equalizer-watch="" style="height: 342px;">. Then it would work.
.grid {
display: grid;
width: 100%;
max-width: 80rem;
margin: 0rem auto;
padding: 1rem;
grid-template-rows: auto;
list-style: none;
grid-template-columns: repeat(2, 1fr);
}
.test-card {
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
}
.grid-col {
display: block;
grid-row-end: span 1;
grid-column-end: span 1;
position: relative;
}
.test-card-body {
padding: 20px;
background-color: #fff;
max-width: 85%;
margin-top: -6.375rem;
position: relative;
z-index: 1;
}
.container {
/* max-width: 80rem; */
padding: 1rem;
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
}
body {
background-color: #efefef;
}
.button {
background-color: grey;
color: white;
border: none;
padding: 5px;
}<div data-equalizer="x0bwi9-equalizer" data-events="mutate" data-mutate="x0bwi9-equalizer" data-resize="x0bwi9-equalizer">
<div ><img alt="" src="https://i.ibb.co/M8TXxQ5/Untitled-1.jpg" />
<div data-equalizer-watch="" >
<h2>Text</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<div>
<p style="text-align: center;"><button >Button</button></p>
</div>
</div>
</div>
<div ><img alt="" src="https://i.ibb.co/M8TXxQ5/Untitled-1.jpg" />
<div data-equalizer-watch="" styles="height: 342px;">
<h2>Text</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<div>
<p style="text-align: center;"><button >Button</button></p>
</div>
</div>
</div>
</div>