I currently have 3 divs with a height of 100vh, but when I view them responsively, the images overflow. You can see the issue in the image attached below. Apologies for any language barrier!
Here is the HTML structure:
<section id="services" class="container content-section text-center">
<div class="col-lg-8 col-lg-offset-2">
<div class="row">
<div class="col-lg-6">
<h2>Services </h2>
<ul>
<li>Carpooling </li>
<li>Food </li>
<li>Accommodation </li>
</ul>
</div>
<div class="col-lg-6">
<img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
</div>
</div>
</section> <!-- close about -->
<section id="communities" class="container content-section text-center">
<div class="row">
<div class="col-lg-6">
<img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
</div>
<div class="col-lg-6">
<h2>Communities </h2>
<ul>
<li>Text </li>
<li>Text </li>
<li>Text </li>
</ul>
</div>
</div>
</section>
Below is the relevant CSS code:
#services{
width: 100%;
height:100vh;
background-color: #62b030;
}
#services img{
height:90%;
}