I've been tasked with converting a Figma design into an HTML page using Bootstrap 5. Take a look at the Figma design:
https://i.sstatic.net/jo5Si.png
However, there's an issue causing a vertical scroll bar to appear on the page. The culprit seems to be the highlighted area in the red box shown here:
https://i.sstatic.net/iDm32.png
The height of the image inside the col div is not triggering vertical overflow. How is the column height determined?
https://i.sstatic.net/bZotC.png
I've attempted adjusting the height of the image div, but that results in making the image too small. I want to understand how the div height is set automatically when utilizing responsive row/col classes.
Below is the code snippet I've worked on:
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
font-family: "Poppins", sans-serif;
h4 {
font-weight: 600;
}
.left-col {
padding-top: 200px;
}
input[type="text"] {
background-color: #f0efff;
height: 62px;
}
...
}<!DOCTYPE html>
<html lang="en">
...
<div class="row justify-content-center">
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img
src="/login-1/assets/logos/facebook-icon.png"
alt="Facebook Icon"
/>
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/apple-icon.png" alt="Apple Icon" />
</a>
</div>
<div class="col-auto p-1">
<a href="#" class="btn btn-round">
<img src="/login-1/assets/logos/google-icon.png" alt="Google Icon" />
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>View the code on CodePen for more details: https://codepen.io/junaidaslam/pen/WNYRRzK?editors=1100