Fix phone image and reduce magnifying issue - html

Question

I am still learning bootstrap and have gone a little far to create a page, I am stuck on 2 things, first one is the phone image at the top section, on my screen it is fine which is 24" with 1600 resolution, but on 15" lcd the phone cuts in half, can someone tell me what to do ? how to fix this ? secondly the images , sections look so magnified so big, does it have any fix ? should I place it in a container ?
Live page : https://babaraliseehar.com/chet/
I have created a single bootstrap page but I am having a little issue in responsiveness.
<section class="section hero-section position-relative" id="a">
<div class="container-fluid position-absolute h-100 hero-bg mob-hid">
<div class="row align-items-stretch h-100">
<div class="col-md-6 hero-left"> </div>
<div class="col-md-6 hero-right"> </div>
</div>
</div>
<!-- <div class="col-md-7 p-0 hero-left-img wow fadeInLeft mob-hid" data-wow-delay=".1s">
<img src="assets/images/front-left2.png" alt="">
</div> -->
<div class="col-12 p-0 hero-mob d-none m-block">
<img src="assets/images/front-left2.png" alt="">
</div>
<div class="container">
<div class="row align-items-stretch">
<div class="col-md-6 offset-md-7 hero-right-text wow fadeInRight" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInRight;">
<h1>Get better, together.</h1>
<p>A professional development social network <br> for today's audience: share what you are <br> doing, in the moment, to get better. </p>
<div id="form_first">
<div class="beta-available">
<p><strong>Join the list for the next beta release!</strong></p>
<form method="post">
<div class="form-bx">
<input type="email" name="email" class="input-bx input-brd txtEmail" placeholder="Email Address" id="txtEmail_first">
</div>
<div class="form-bx ">
<button type="submit" name="submit" class="btn button-blue btnValidate_first ">
<span class="">Sign Up</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

image is croped because you used background-size: cover;. if you don't want image to get cropped,
use:
background-size: contain;
also in your layout, image should be on right. so add:
background-position-x: right;
to your image as well.
Also if you want your image to crop, but you want the right side to be always visible, let it to be cover, and use background-position-x: right; to crop only left side.