I'm having trouble making both the image and text responsive on mobile devices. Could there be an issue with the CSS code I'm using with Bootstrap 4?
Here is the code snippet:
HTML file
<header class="masthead d-flex">
<div class="container text-center my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<img src=" " alt="" class="rounded-circle" width="600" height="400">
<h3 class="mb-5">
<h3 style="font-family:courier;">ABC</h3>
</h3>
</div></div></div>
<div class="overlay"></div>
CSS
.masthead {
min-height: 30rem;
position: relative;
display: table;
width: 100%;
height: auto;
padding-top: 8rem;
padding-bottom: 8rem;
background: linear-gradient(90deg, fade-out($white, 0.9) 0%, fade-out($white, 0.9) 100%);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
h1 {
font-size: 4rem;
margin: 0;
padding: 0;
}
@media (min-width: 992px) {
height: 100vh;
h1 {
font-size: 5.5rem;
}
}
}
Any assistance on fixing this issue would be greatly appreciated!