Issue with spacing at various screen sizes below the two images has been persisting. Despite several attempts over the past 2-3 days, I have been unable to rectify the problem. Assistance in resolving this issue would be greatly appreciated. The relevant code snippets pertaining to the images are provided below.
Problem at medium screen size: https://i.sstatic.net/b4n2T.jpg
Problem at large screen size: https://i.sstatic.net/uHPw4.png
HTML:
<div class="section-three">
<div class="container-fluid">
<div class="row">
<!---------------------- Left-Area ------------------->
<div class="s3-left col-sm-8">
<a href="#"><img src="images/logo4.png" alt="logo" class="img-responsive center-block"/></a>
</div>
<!-----------------------Right-Area ------------------->
<div class="s3-right col-sm-4">
<div class="container-fluid">
<div class="s3-right-up row">
<div class="container-fluid">
<div class="s3-logo row">
<a href="#" target="_self">
<img src="images/logo3.png" alt="logo" class="img-responsive center-block" style="width:32px; height:auto;"/>
</a>
</div>
<div class="s3-heading row">
<h5 class="text-uppercase text-center"> Vintage oliva </h5>
</div>
<div class="s3-description row">
<div class="gap">
<p class="text-justify">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and...
</p>
</div>
</div>
</div>
</div>
<div class="s3-right-down row">
<div class="container-fluid">
<div class="s3-image row">
<img src="images/background3.jpg" alt="logo" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.section-three .s3-left.col-sm-8 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.s3-left {
background: url("images/background2.jpg") no-repeat 0 0 / 100% 100%;
}
.s3-left img {
width: 92px;
padding: 199px 0;
}
.s3-image img {
width: 100%;
}
.s3-logo {
padding: 48px 0 25px;
}
.s3-heading h5 {
margin: 0;
padding: 0 0 10px;
}
.s3-description .gap {
width: 80%;
margin: auto;
}
.s3-description p {
font-size: 12.4px;
padding-bottom: 58px;
}