문제 설명
휴대폰에서 보이지 않는 웹사이트의 일부 (Part of the Website invisible on mobile phone)
내 웹사이트를 디자인하려고 합니다.
모든 브라우저에서 잘 작동하지만 내 휴대전화에서는 첫 번째 부분만 볼 수 있습니다.
그래서 내가 볼 수 있는 코드의 일부와 내 휴대폰에서 볼 수 없는 코드의 일부를 게시합니다. 내가 왜 두 번째 부분을 볼 수 없는지 아는 사람이 있습니까?
저는 Jquery, Foundation 및 Skrolr.js를 사용하고 있습니다.
Visible 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
6.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
6<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
6.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;
}
}
참조 솔루션
방법 1:
So, if anyone else stumbles upon the same question...i know the answer is quite easy but i am still gonna post it.
Add a div with the class skrollr‑body.
like this:
<div id="skrollr‑body">
</div>
Thats it. Thank you guys for your help!