I'm currently using Bootstrap 5 to create a form.
On a computer screen, my file input element looks like this:
https://i.sstatic.net/fX6Kx.png
However, on mobile devices, it appears like this:
https://i.sstatic.net/ilUZ9.png
Below is the code snippet:
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6a8b6aa">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class="row justify-content-end mt-1">
<label for="totalScore" class="col-2 me-4">Total score</label>
<input type="text" name="totalScore" id="totalScore" class="col-1" value="0/27" readonly style="width:20%;" />
</div>
<div class="row justify-content-end mt-1">
<label for="percent" class="col-2 me-4">Percentage achieved</label>
<input type="text" name="percent" id="percent" class="col-1" value="0%" readonly style="width:20%;" />
</div>
<div class="row ms-3 mt-3 mb-3">
<label for="comments" class="col-2 me-5">Comments /<br/> Observations</label>
<textarea name="comments" id="comments" rows="1" class="col-5"></textarea>
</div>
<div class="row ms-3 mt-2 mb-2">
<label for="checkedBy" class="col-2 me-5">Checked by</label>
<input type="text" name="checkedBy" id="checkedBy" class="col-5" />
</div>
<div class="row ms-3 mt-2 mb-2">
<label for="intakeQuantity" class="col-2 me-5">Intake Quantity</label>
<input type="number" name="intakeQuantity" id="intakeQuantity" class="col-5" min="0" step="1" />
</div>
<div class="row ms-3 mt-2 mb-2">
<label for="rejectedProduct" class="col-2 me-5">Rejected Product</label>
<input type="number" name="rejectedProduct" id="rejectedProduct" class="col-5" min="0" step="1" />
</div>
<div class="row ms-3 mt-2 mb-2">
<label for="processed" class="col-2 me-5">Processed</label>
<input type="number" name="processed" id="processed" class="col-5" min="0" step="1" />
</div>
<div class="row ms-3 mt-2 mb-2 imput-group">
<label for="photo" class="col-2 me-5">Upload Photo</label>
<span class="input-group-text col-1">JPEG Only</span>
<input type="file" name="photo" id="photo" class="form-control col-7" style="text-align:left;width:33.5%;height:100%;" accept="image/jpeg" />
</div>
<div class="row justify-content-center m-2">
<input type="reset" value="Cancel" class="col-1" style="width:auto;" />
</div>
<div class="row justify-content-center m-2">
<input type="submit" value="Submit" class="col-1" style="width:auto;" />
</div>Any suggestions on how I can prevent the span from shrinking?