I have been working on a project for genesisai.bio, and it functions flawlessly in Chrome. However, I've encountered an issue where an image stretches on Safari and iOS devices. Can someone guide me on how to resolve this problem? I've experimented with setting height: auto on relevant media spots and also tried utilizing flexbox. Since I'm relatively new to web development, I haven't been able to find a solution yet. Any assistance would be greatly appreciated!
EDIT:
<section class="banner-area relative" id="home">
<div class="container" >
<div class="row fullscreen align-items-center justify-content-center">
<div class="banner-content col-lg-6 col-md-12">
<h1 class="text-uppercase">
Sharing data your way <br>
</h1>
<p>
ABCDEEFF
</p>
<button class="primary-btn2 mt-20 text-uppercase " onclick="window.location.href = 'survey.html';"> Get Started <span class="lnr lnr-arrow-right"></span></button>
</div>
<div class="col-lg-6 d-flex align-self-center img-right">
<img class="f-img img-fluid" src="img/back.jpg" alt="">
</div>
</div>
</div>
</section>
::-moz-selection {
/* Code for Firefox */
background-color: #2482ff;
color: #fff;
}
::selection {
background-color: #2482ff;
color: #fff;
}
/* More CSS styling goes here... */