I seem to be having trouble with my button and placeholder image not being responsive. I have placed them inside a form, and you can see an example of the issue below:
https://i.sstatic.net/pLYrc.png
The images are getting cut off when I minimize the screen size.
I have tried using the "fluid" class but it doesn't seem to work as expected when resizing the screen.
https://i.sstatic.net/ABYjo.png
<div class="col-md-6">
<form id="form" class="needs-validation" action="" novalidate>
<div class="form-group row">
<label for="validationName" class="col-2 col-form-label">Name:</label>
<div class="col-10">
<input name="validationName" type="text" class="form-control" id="validationName" placeholder="Company Name" required>
</div>
</div>
<div class="form-group row">
<label for="validationEmail" class="col-2 col-form-label">Email:</label>
<div class="col-10">
<input name="text2" type="email" class="form-control" id="validationEmail" placeholder="{email}" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" required>
</div>
</div>
<div style=" left: 500px; top: 10px; position: absolute;">
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" class="img-fluid" id="output" width="100" height="100" style="border-radius: 50%;" />
<br/><br>
<!-- <label for="file" style="cursor: pointer; padding-left: 3px; padding-top: 1px; position: static; margin-left: 45px; height: 30px;">Select Image</label> -->
</div>
<button style="left: 525px; top: 120px; position: absolute;" type="submit" class="submitb btn btn-primary">Submit</button>
</form>How can I modify the code to move the image and button to the left side of the screen when the resolution is reduced to prevent them from being cut off?