I am currently working on replicating a card design similar to this one from WIX using bootstrap. I encountered 2 issues:
- Initially, the card only touches the contact bar at full screen. However, as I reduce the size of the screen, the card begins to float like this. (EDIT: resolved this issue)
- I would prefer the card to switch to a vertical layout with text below the photo when the screen size becomes too small. (EDIT: resolved this issue)
UPDATE: I am facing an issue with responsiveness: when the screen size decreases, the text does not align properly and my headshot photo is partially cut off at the top, resembling what you see in an iPad like this and on a phone like this.
Part of my HTML and CSS code looks like this:
.grid-container{
display: grid;
grid-template-rows: 580px 75px 405px;
width: 100vw;
}
.grid-item-contact{
background-color: #efefef;
display: grid;
grid-template-columns: 25% 50% 25%;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- main container -->
<div class = "grid-container">
<!-- card with photo -->
<div class="grid-item-card">
<div class="card mb-3 mx-auto border-0" style="max-width: 50vw; margin-top: 10vh; margin-bottom: 0px; border-radius:5px 5px 0px 0px;">
<div class="row no-gutters">
<div class="col">
<img src="cat.jpg" class="card-img" alt="...">
</div>
<div class="col">
<div class="card-body">
<h5 class="card-title">Quinten KJ</h5>
<h6 class="card-text">Master student financial engineering</h6>
<p class="card-text">This is text</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<!--contact bar -->
<div class="grid-item-contact">
<div class = "grid-item-contact-1"></div>
<div class = "grid-item-contact-2" style="background-color: #636769; text-align: center; border-radius:0px 0px 5px 5px;">
<a href="###"><img src="linkedin-6-32.png" style="margin-top: 20px;"></a>
<a href="###"><img src="facebook-3-32.png" style="margin-top: 20px; margin-left: 20px;"></a>
<a href="###"><img src="mail-32.png" style="margin-top: 20px; margin-left: 20px;"></a>
</div>
<div class = "grid-item-contact-3"></div>
</div>