I recently completed a portfolio website using HTML, CSS, Bootstrap 4, and jQuery. While the site displays properly on the browser and up to tablet mode, I encountered issues when viewing it on my phone. There seems to be a blank area that can be scrolled into, the text within the banner image gets cut off, and the image in the "about me" section shrinks to nothing. The website in question is www.reallybilly.com if my explanation is unclear.
Despite experimenting with different viewpoints and @media widths, I have not been able to resolve these display issues.
body,
html {
height: 100%;
max-width: 100%;
}
.banner {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0,
0.5)),
url("../imgs/city/IMG-5676.JPG");
height: 100vh;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
}
I am seeking ways to make the site completely responsive without starting from scratch.