Currently, I'm utilizing a jumbotron element on my website and aiming to make it fluid in order to adapt and fit the entire jumbotron to the screen width. However, I seem to be facing difficulty when attempting to increase its width.
Below is the code snippet I'm working with:
$(".jumbotron").css({ height: $(window).height() + "px" });
$(window).on("resize", function() {
$(".jumbotron").css({ height: $(window).height() + "px" });
});
$(".form-control").click(function(){
$(this).prev().val("");
document.getElementById("inzone").style.display = 'block';
document.getElementById("outzone").style.display = 'block';
}); .jumbotron {
color: white;
background-image: url("picture link");
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
.wrap{
width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="wrap">
<div style="text-align: center;"><label style="font-weight:bold;">Select your location to find best offers available:</label></div>
<div class="form-froup">
<div class="input-icons">
<i class="fa fa-search icon"></i>
<input type="search" class="form-control" id="search_input" placeholder="Enter Area Name" />
</div>
</div>
</div>
</div>
</div>