Question

我试图设计我的网站。

它适用于所有浏览器，但在我的手机上只看到第一部分。

所以即时发布我可以看到的部分代码和我手机上看不到的部分代码。 有谁知道为什么我看不到第二部分？

我正在使用Jquery，Foundation和Skrolr.js

可见的HTML

<div class="row">
    <div class="large-12 small-12 medium-12 columns section1" data-0="padding-left: 12%; padding-right: 12%;" data-center="padding-left: 0%; padding-right: 0%;" >

        <h1>Herzlich Willkommen</h1>
        <p>Elegantes Webdesign für Unternehmen.</p>

        <div class="row Collage">
            <div class="large-6 medium-6 small-12 leftCollage columns">
                <div class="whiteFrame"><h3>Webdesign</h3><p>Elegant und beruhigend sollte eine Website sein. Schnell und simpel. <br>Das richtige Maß. </p></div>
            </div>

            <div class="large-6 medium-6 small-12 rightCollage columns">
                <div class="whiteFrame"><h3>Programming</h3><p>Jede Idee braucht eine Umsetzung. Ich mache Sie wahr.<br>Jede Idee. </p></div>
            </div>

        </div>
</div>

可见css

.Collage {
    padding-left: 5em;
    padding-right: 5em;
    padding-top: 0%;

}


@media only screen and (max-width: 64em) {
    .Collage {
            padding: 0px;
        }
    }

.leftCollage {
    background-image: url("../img/coffee.jpg");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    text-align: center;


    border-right: solid white 2px;
    border-left: solid white 2px;
    opacity: 0.9;
    border-bottom: solid white 2px;
    min-height: 85vh;
    padding-top: 35%;

}

@media only screen and (min-width: 64.063em) {
    .leftCollage {
        min-height: 85vh;
        border-bottom: solid white 0px;
        padding-top: 20%;

    }
}


.leftCollage:hover {
    opacity: 1;
    -webkit-transition: opacity 0.2s ease-in-out;

}

.rightCollage {
    background-image: url("../img/pencil.jpg");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    text-align: center;


    border-right: solid white 2px;
    border-left: solid white 2px;
    opacity: 0.9;
    border-bottom: solid white 2px;
    min-height: 85vh;

    padding-top: 35%;


}

@media only screen and (min-width: 64.063em) {
    .rightCollage {
        min-height: 85vh;
        border-bottom: solid white 0px;
        padding-top: 20%;


    }
}

隐形HTML

<div class="row threeOneDiv" data-0="padding-left: 0%; padding-right: 0%; " data-center="padding-left: 12%; padding-right: 12%;">

    <div class="large-4 medium-12 small-12 columns threeOne"  data-0="padding-top: 300px " data-center="padding-top: 0px">
        <h3>Webdesign</h3>
        <i class="fa fa-desktop fa-2x"></i>
        <p>Konzeption und Umsetzung von Websites für Unternehmen.</p>
    </div>

    <div class="large-4 medium-12 small-12 columns threeOne" data-0="padding-top: 300px" data-center="padding-top: 0px">
        <h3>SEO</h3>
        <i class="fa fa-search fa-2x"></i>
        <p>Planung und Durchführung von SEO-Kampagnen.</p>
    </div>

    <div class="large-4 medium-12 small-12 columns threeOne" data-0="padding-top: 300px" data-center="padding-top: 0px">
        <h3>Programmierung</h3>
        <i class="fa fa-code fa-2x"></i>
        <p>Backend und Schnitstellenentwicklung.</p>
    </div>

</div>

隐形CSS

.threeOne {
    text-align: center;
    padding-left: 7%;
    padding-right: 7%;
    margin-bottom: 0px;


}

.threeOne:hover {
    background-color: #f6f6f6;

    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;


}

@media only screen and (max-width: 64em) {
    .threeOne {
        margin-bottom: 20px;
    }
}

.threeOneDiv {
    padding-top: 2em;
    min-height: 60vh;
    padding-right: 12%;
    padding-left: 12%;
    padding-bottom: 1em;
}


@media only screen and (min-width: 1em) and (max-width: 64em) {
.threeOne {
    padding: 0em;

            }
}

Answer 1

所以，如果有其他人偶然发现同样的问题......我知道答案很简单，但我仍然会发布。

使用skrollr-body类添加div。

像这样：

<div id="skrollr-body">

</div>

多数民众赞成。谢谢你们的帮助！

手机上隐藏的部分网站

1 个答案: