I'm currently working on a website project and utilizing bootstrap 3, but I've encountered some issues that I need help with:
Site in Large window :
Site in small window :
1) Background image : I'm facing an issue where the background image resizes to a certain point when the window is made smaller, then stops resizing. In mobile view, there is a large overflow hidden. Is there any way to make the background image resize according to the window size?
Here's my current CSS code for the background:
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -50px;
/* Pad bottom by footer height */
padding: 0 0 50px;
background:url("/images/bgg5.jpg") no-repeat;
background-size: cover;
}
2) Input fields: The input fields are resizing too much in smaller browser windows. Is there a way to prevent them from resizing unless the window width is smaller than the length of the input field?
This is how it appears in a mobile view:
Below is the code for one input field:
<div class="form-group">
<label for="inputID">Input</label>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Enter Input" name="login">
</div>
</div>
</div>
</div>