How to make responsive cards as shown below? - html

Question

I am having some problem with that black box with date. I made it but it isn't responsive.
.date
{
width: 20%;
height: 15%;
background-color: black;
z-index: 1;
position: absolute;
top: 45%;
left: 8%;
}
<div class="card up" style="width:400px height:400px">
<img class="card-img-top" src="https://placehold.it/1900x1400" alt="Card image" style="width:100%">
<div class="date">
</div>
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
See Profile
</div>
</div>

Answer 1

Use position-absolute for the card-body
Put the date inside the card-body and give it negative top value.
Fixed size
.date {
width: 50px;
height: 50px;
background-color: black;
top: -25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6 mx-auto ">
<div class="card up" style="width:400px height:400px">
<img class="card-img-top" src="https://placehold.it/1900x1400" alt="Card image" style="width:100%">
<div class="card-body position-relative pt-5">
<div class="date position-absolute"></div>
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
See Profile
</div>
</div>
</div>
</div>
</div>
Relative size
.date {
width: 3.8888888889em;
height: 3.8888888889em;
background-color: black;
top: -1.9em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6 mx-auto ">
<div class="card up" style="width:400px height:400px">
<img class="card-img-top" src="https://placehold.it/1900x1400" alt="Card image" style="width:100%">
<div class="card-body position-relative pt-5">
<div class="date position-absolute"></div>
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
See Profile
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/gKzQez
https://css-tricks.com/almanac/properties/p/position/
You can also do this with negative margin too.

Answer 2

First you have to respecify the width and height of 'card' and 'up' classes (missing semicolumn).
Then with the actual code snippet i can't clearly see what is wrong, but if you have responsive problem with absolute positioning, try to add "position: relative" to your container so the absolute elements won't overflow their parent block.

Answer 3

Lets understand the issue of this case first. As you have added width: 100% to the image, this has a responsive height. Therefore, .card doesn't have a fix height. When you use top: 40% (percentage value), this breaks the view.
Solution;
wrap image and .date inside another div.
<div style="position: relative;">
<img class="card-img-top" src="https://placehold.it/1900x1400" style="width: 100%;" alt="Card image">
<div class="date"></div>
</div>
And, set bottom: - 20% or appropreate value instead of top: 40% for .date class.
Hope this will fix the issue.