By using the container-fluid class, I have created a header that spans the entire front page. While this setup functions perfectly on Opera, Firefox, and Microsoft Edge, it falls short on Chrome, iPad, and mobile phone screens.
Take a look at my code:
<div class="jumbotron2" id="top">
<div class="container-fluid"></div>
</div>
Here's the accompanying CSS:
.jumbotron2 {
background: url(../img/xx.png) no-repeat center center;
background-size: 100%;
padding-top: 20%;
padding-bottom: 20%;
}
.container-fluid {
padding: 60px 50px;
}
How can I address this issue to ensure consistency across all devices? Thank you for your help.
UPDATE: I've included screenshots for reference:
Chrome full screen laptop - the background fills the entire screen
Chrome small screen - similar to tablet size chrome small screen tablet-size
The smaller the screen, the larger the white space above the header becomes.