I'm exploring the world of creating responsive websites using Bootstrap, a new venture for me. One challenge I've encountered is trying to create a hero image with text positioned perfectly in the center. Despite my efforts, the text does not adjust when the background image resizes for smaller viewports, resulting in an issue like this: https://i.sstatic.net/EqI1p.png
Here's what I have tried so far: HTML:
<header class="header-container">
<!-- background image -->
<div class="bg-image d-flex justify-content-center align-items-center">
<div class="text-center">
<h1 class="h1-hero h-font">where great ideas come to life</h1>
<p class="p-hero text-font">Passionate creative studio helping startups grow their
business!
</p>
</div>
</div>
</header>
CSS:
.header-container {
padding: 48px 50px 0px;
max-width: 100%;
}
.bg-image {
background-image: url('../img/hero.png');
background-size: 100%;
height: 100vh;
background-repeat: no-repeat;
}
.h1-hero {
font-size: var(--font-size-h1);
font-weight: 500;
line-height: 106px;
letter-spacing: 4.5px;
text-transform: uppercase;
color: white;
}
.p-hero {
font-family: var(--font-family-text);
font-size: 20px;
color: white;
opacity: 80%;
font-weight: 300;
line-height: 23px;
letter-spacing: 1.3px;
padding-top: 12px;
}