Bare Feet Bare Feet - 1 month ago 8
jQuery Question

Objects in section can't be resized to fit to section size CSS/HTML

I have created a landing page and have some troubles making it responsive.

I am using scrollify jQuery library so user on click or scroll, skips between sections of my landing page.

When using the mobile version and changing the orientation so it's landscape the objects in my section go over the sections.

Here is one of my 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>





Visit www.konceptxix.co.uk if you want to get a better picture of what I mean.

Also, to get the sections to be the right size, user have to refresh the website is the size changes. E.g. if you have the orientation you have to refresh the page to get the right size of the sections.

It would be great if someone could help me!

Answer Source

for responsive please include the viewport meta tag in the header.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The link which you provide is missing with this tag. This may help you.