With Bootstrap, I am trying to create form fields/inputs that are 200 pixels wide by default, but switch to 100% width when viewed on a smartphone with a screen width less than 768 pixels.
<form>
<div class="form-group responsive200">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email">
</div>
</form>
I applied this CSS styling, but the input fields remain 200 pixels wide even on smaller screens.
.responsive200 {
width: 200px;
}
@media screen and (max-width: 768px) {
.responsive200 {
width: 100%;
}
}
How can I ensure that my input fields are 200 pixels wide unless the screen width is less than 768 pixels, in which case they should be 100% wide?