I've implemented a Profile Edit form in my React app using Bootstrap 4.
While the form displays correctly on larger screens, such as desktops, I'm facing an issue on smaller screens like mobile devices. The form-groups are overlapping each other, causing elements to be out of place. For example, in the problem image provided below, you can see that the Profile Photo placeholder image is overlapping with the First Name field instead of pushing it down as intended.
I suspect this issue may be related to how I'm utilizing the Bootstrap Grid system or handling the form-groups. Can anyone identify where I might have gone wrong?
For reference:
JSFiddle: https://jsfiddle.net/v9fpfxyo/
CORRECT:
https://i.sstatic.net/9BTyy.png
PROBLEM:
https://i.sstatic.net/vvpFo.png
Snippet from JSFiddle:
<div class="container">
<form>
<div class="row">
<div class="col-lg-3 col-sm-12">
<div class="form-group" style="height: 100%;">
<label for="files">Change your profile photo</label>
<span>
<div class="" style="width: 100%; height: 100%; font-size: 0px; margin-bottom: 1rem; background-color: rgb(29, 161, 242); background-image: url("https://abs.twimg.com/a/1498195419/img/t1/highline/empty_state/owner_empty_avatar.png"); background-position: 50% center;">
<!-- react-text: 85 -->Try dropping some files.<!-- /react-text --><input type="file" accept="image/jpeg, image/png" multiple="" style="display: none;">
</div>
<button type="button" class="btn btn-secondary btn-sm btn-block">Upload new Photo</button><!-- react-text: 88 --><!-- /react-text -->
</span>
</div>
</div>
<div class="col-lg-9 col-sm-12">
<div class="form-group">
<label>First Name</label>
<div><input type="text" name="first_name" value="XXX" placeholder="First Name" class="form-control"></div>
</div>
<div class="form-group">
<label>Last Name</label>
<div><input type="text" name="last_name" value="XXX" placeholder="Last Name" class="form-control"></div>
</div>
</div>
</div>
<div class="row row justify-content-end">
<div class="col-lg-9 col-sm-12"><button type="submit" class="btn btn-primary">Save Changes</button></div>
</div>
</form>
</div>