I've encountered an issue with the image size and position when resizing to mobile view in the browser.
.extension {
display: table;
padding: 50px 0px 50px;
width: 100%;
height: auto;
color: #fff;
background-color: #558C89;
background-size: cover;
font-size: 22px;
font-weight: 200;
margin: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
# extension img {
width: 350px;
height: 275px;
position: absolute;
}
footer {
padding: 50px 0;
height: auto;
}<section id="extension" class="extension">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-8">
<h1>Download Our Extension</h1>
<p>extension
</p>
<a href="http://www.google.com/" class="btn btn-lg btn-dark" target="_blank">Download Extension</a>
</div>
<div class="col-6 col-md-4">
<img src="img/iMacricket.png">
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<footer id="contact">
<div class="container">
<div class="row">
<div class="span9">
<div class="title-page">
<h2 class="title">Get in Touch</h2>
<hr class="small">
<h3 class="title-description">We are continually<br/>
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-8">
<form id="contact-form" class="contact-form" action="#">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Address" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a id="contact-submit" class="btn btn-lg btn-dark" href="#">Send Your Email</a>
</p>
</form>
</div>
<div class="col-6 col-md-4 text-center">
<h2>Contact Us</h2>
<hr class="small">
<ul class="list-unstyled">
<li><i class="fa fa-envelope fa-fw"></i> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99798949cb99c81989489959cd79a9694">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f5e4f2f5c1e6ece0e8edafe2eeec">[email protected]</a></a>
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
</li>
</ul>
<hr class="small">
</div>
</div>
<br/>
<p class="text-muted">Copyright © 2017 - Designed &</p>
</div>
<a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
</footer>I attempted to set the height:auto, and resize the image but faced some challenges.