The questions is: if a form text input's fixed width is smaller than container's width, by downsizing the viewport, shouldn't the input field fit within that container, in a fully responsive environment like Bootstrap?
By providing code, my question will be clearer:
.largo220 and .largo370 classes were created to have fixed-width input fields in a form:
.largo220 {
width: 220px;
padding: 3px 6px;
border: 1px solid #167432;
border-radius: 5px;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 5px;
}
.largo370 {
width: 370px;
padding: 3px 6px;
border: 1px solid #167432;
border-radius: 5px;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 5px;
}
The HTML really simple code is:
<DIV class="container pt-3" style="max-width: 900px">
<div class="mb-3 h3 text-success">
<form method="post" action="action.php">
<div class ="p-3 mb-5 border rounded" style="background-color:#EBEBEB">some text<br>
<input type="text" class="largo220" name="1" placeholder="...">
</div>
<div class ="p-3 mb-5 border rounded" style="background-color:#EBEBEB">some text<br>
<input type="text" class="largo370" name="2" placeholder="...">
</div>
<div class="mt-5 list-group">
<input type="submit" class="btn btn-outline-success" value="submit">
</div>
</form>
</div>
</DIV>
Container max-width: 900px parameter is intended for better view on wider screens.
And, actually, on wide screens I get no problem, but on mobile devices (even with 1024x2483 resolution, bigger than the input's 370px width) the input field's right border trespasses the container's limit and I get the following:
input field's right border trespasse container's right border on mobile devices
I tried several work-arounds: max-width: 100% was the only one that actually forces the input's fitting, but still won't respect the actual input's fixed width parameter.
Before posting my question, I carefully checked all related other questions, but wasn't able to run into a question really similar to mine (input fields with fixed width).
Hope somebody could help.