Issue
I want to ask how to make all the buttons in the different cards that have different length of the text be at the same place. The buttons should be at the end of the cards. This is what i want. And this is my HTML, CSS code.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: #f0f0f0;
}
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 100px;
}
.card {
width: 325px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
margin: 20px;
}
.card img {
width: 100%;
height: auto;
}
.card-content {
padding: 16px;
}
.card-content h3 {
font-size: 28px;
margin-bottom: 8px;
}
.card-content p {
color: #666;
font-size: 15px;
line-height: 1.3;
}
.card-content .btn {
display: inline-block;
padding: 8px 16px;
background-color: #333;
text-decoration: none;
border-radius: 4px;
margin-top: 16px;
color: #fff;
}<div class="card-container">
<div class="card">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-content">
<h3>This is title of card 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat velit scelerisque in dictum non consectetur. urus in
massa tempor nec feugiat nisl pretium fusce id.
</p>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-content">
<h3>This is title of cards 2 and it is longer</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-content">
<h3>This is title of card 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui.
</p>
<a href="" class="btn">Read More</a>
</div>
</div>Solution
this will do the work,
expend snippet and run the code to to view on a wide screen
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: #f0f0f0;
}
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 100px;
align-items: stretch;
}
.card {
display: flex;
flex-direction: column;
width: 325px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
margin: 20px;
}
.card img {
width: 100%;
height: auto;
}
.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
height: 100%;
}
.card-content h3 {
font-size: 28px;
margin-bottom: 8px;
}
.card-content p {
color: #666;
font-size: 15px;
line-height: 1.3;
}
.card-content .btn {
display: inline-block;
padding: 8px 16px;
background-color: #333;
text-decoration: none;
border-radius: 4px;
color: #fff;
}<body>
<div class="card-container">
<div class="card">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-content">
<div>
<h3>This is title of card 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat velit scelerisque in dictum non consectetur. Curus in massa tempor nec feugiat nisl pretium fusce id.</p>
</div>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-content">
<div>
<h3>This is title of cards 2 and it is longer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-content">
<div>
<h3>This is title of card 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui.</p>
</div>
<a href="" class="btn">Read More</a>
</div>
</div>
</div>
</body>Answered By - Hezy Ziv
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.