I'm facing some challenges with responsiveness on my landing page.
Utilizing the scrollify jQuery library, users can skip between different sections of the landing page on click or scroll.
However, when switching to landscape orientation on mobile devices, the objects in the sections overlap.
Here is a snippet of one of the sections:
.inner2 {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.centerwraper {
position: relative;
height: auto;
margin: 0 auto;
}
.centerdiv {
margin: 0 auto;
text-align: center;
}
.coltitle {
width: 50%;
}
.colimage {
width: 90%;
}<section class="panel OriginalCollection" data-section-name="OriginalCollection">
<div class="inner2">
<div class="stripe">
<br>
</div>
<div class="centerwraper">
<div class="centerdiv">
<img class="coltitle" src="img/original_header.png" />
</div>
<div style="width: auto">
<div class="centerdiv">
<img class="colimage" src="img/original_bottles.png" />
</div>
<div class="centerdiv">
<div style="padding-left: 30px" class="descriptions">
<p2>
The real MVP of the fruity
<br> flavours. Perfect for those
<br> looking for a one of a kind taste
<br> sensation. A true
<br> mouth-watering fruit explosion
<br> that your taste buds have
<br> been waiting for.
</p2>
</div>
<div style="padding-left: 60px" class="descriptions">
<p2>
A top secret recipe that can
<br> only be described as the daddy
<br> of all day vapes. A fruity
<br> undertone and a cool crystal
<br> after sensation that will leave
<br> you wondering what it is...
<br> and wanting more.
</p2>
</div>
<div style="padding-left: 80px" class="descriptions">
<p2>
Packed with one hell of a bite.
<br> This flavour is crammed with
<br> sweet red cherries blended
<br> perfectly with fresh picked
<br> forest fruits. The fruity taste is
<br> then entangled beautifully with
<br> sweet eucalyptus and aniseed.
</p2>
</div>
</div>
</div>
</div>
</div>
</section>Furthermore, users need to refresh the website to adjust section sizes correctly if there are changes in size (e.g., orientation change requires a page refresh for proper section sizing).