SOLVED - Why is this bootstrap card misaligned? - html

Question

The image and text of this bootstrap card are supposed to be side by side, with the combo title + text centralized in relation to the image. But they are somewhat above the image.
Image of how it looks:
HTML:
<div class="card bg-transparent border-0 text-white mb-3" >
<div class="row g-0">
<div class="col-md-6">
<img src="../assets/images/cp/sobre-cid-1.jpg" class="img-fluid rounded-start img-esq" alt="cid-1">
</div>
<div class="col-md-6">
<div class="card-body">
<h3 class="card-title">TITLE</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
CSS:
.img-fluid.rounded-start {
height: calc(120px + 10vw);
width: 90vw;
object-fit: cover;
}
.img-esq {
border-radius: 0px 30px 30px 0px;
}
.img-dir {
border-radius: 30px 0px 0px 30px;
}
.card-title {
font-family: 'Martel';
font-size: 22px;
padding: 20px;
text-align: left;
font-weight: 600;
}
.card-title-right {
font-family: 'Martel';
font-size: 22px;
padding: 20px;
text-align: right;
font-weight: 600;
}
.card-text {
font-family: 'Martel';
font-size: 14px;
padding-left: 20px;
padding-right: 30px;
text-align: left;
}
.card-text-right {
font-family: 'Martel';
font-size: 14px;
padding-left: 30px;
padding-right: 20px;
text-align: right;
}
Additional info: The card is inside a div that gets the entire page, this is it's CSS:
.bg {
background-image: url(../images/cp/fundo.png);
background-position: center;
background-repeat: repeat-y;
background-size: cover;
margin-top: 0px;
text-align: center;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
}
I mostly looked for margins and paddings. I tried changing padding-top and margin-top to zero, I even looked for this in the item above the bootstrap card, but nothing helped, there was only a br tag between the item above the card and the card itself. I also looked for a margin in the card and everything seems right.
EDIT 1:
I added to .row a display: flex and align-items:center, it is not perfectly centered but maybe I can use it, but there's still a big space in between each card:
EDIT 2:
I added to .row a margin-top: -80px and now the space between cards is good. Not the perfect solution I think but works for now.
To make the text vertically centered in relation to the image, I added margin-top: 60px to the cards' titles, and it pushed them down. Again, not perfect but works for now.
EDIT 3:
I fixed it. The problem was in a part of the CSS code I didn't know influenced the whole page. It was like this:
img {
width: 70%;
height: auto;
margin-top: 15%;
}
I thought it would only influence the class that was above it. Turns out, it influenced all the img tags.
I found out by deleting part by part of the CSS code in Codepen.

Answer 1

The problem may be caused by the calc() function in the height property for the img-fluid.rounded-start class. This function calculates the height of the image based on the size of the viewport, which could be causing the image to be larger or smaller than expected. Try to set fixed values to it.
Also, you can try and use align-items: center in the .bg class, this should align the elements at the center of the div.