节中的对象无法调整大小以适合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.

我正在使用scrollify jQuery库,因此用户点击或滚动,跳过我的目标网页的各个部分。

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>

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.

此外,要使部分大小合适,用户必须刷新网站的大小更改。例如。如果你有方向,你必须刷新页面以获得正确的部分大小。

1 个解决方案

#1

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.

此标记缺少您提供的链接。这可能对你有所帮助。

#1