对不起下面的混乱,但我花了太长时间现在试图解决这个问题,所以有时间退缩并寻求帮助!
用于解释此问题的屏幕截图:
http://crazy-pixels.co.uk/test/img/1.PNG http://crazy-pixels.co.uk/test/img/2.PNG
基本上有时网页在移动设备上工作正常,有时候网页中的所有内容都是向右移动,所以你只能看到它的一部分,而不必横向滚动。如果你刷新页面4-5次,它通常会自己回到移动视图中。
网络链接是http://crazy-pixels.co.uk/test/,只是问题不在下面的CSS中,而是用于文本动画的JS。
感谢
/* Google fonts & font family
==================================================*/
@import url(font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Muli);
@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600,700);
/* General
==================================================*/
html,
body {
height: 100%;
font-family: 'Poppins', sans-serif;
line-height: 1.8;
color: #999
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
.no-padding [class^="col-"] {
padding-left: 0;
padding-right: 0;
}
.main-container {
padding: 100px 0;
}
.center {
text-align: center;
}
a {
-webkit-transition: all .3s;
transition: all .3s
}
.uppercase {
text-transform: uppercase;
}
.h-30 {
height: 30px
}
.h-10 {
height: 10px
}
.color {
color: #02FA79;
font-size: 11px;
}
/* typography
==================================================*/
h1 {
color: #393939;
font-size: 60px;
text-transform: uppercase;
}
h3 {
color: #393939;
}
h5 {
color: #02FA79;
}
/* preloader
==================================================*/
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f5f5f5;
/* change if the mask should be a color other than white */
z-index: 1000;
/* makes sure it stays on top */
}
.pre-container {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 100px auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #02FA79;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@keyframes bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
/* box-intro
==================================================*/
.box-intro {
text-align: center;
display: table;
height: 100vh;
width: 100%;
}
.box-intro .table-cell {
display: table-cell;
vertical-align: middle;
}
.box-intro em {
font-style: normal;
text-transform: uppercase
}
b i:last-child {
color: #02FA79 !important;
}
.box-intro h5 {
letter-spacing: 4px;
text-transform: uppercase;
color: #999;
line-height: 1.7
}
/* mouse effect */
.mouse {
position: absolute;
width: 22px;
height: 42px;
bottom: 40px;
left: 50%;
margin-left: -12px;
border-radius: 15px;
border: 2px solid #888;
-webkit-animation: intro 1s;
animation: intro 1s;
}
.scroll {
display: block;
width: 3px;
height: 3px;
margin: 6px auto;
border-radius: 4px;
background: #888;
-webkit-animation: finger 2s infinite;
animation: finger 2s infinite;
}
@-webkit-keyframes intro {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
transform: translateY(40px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes intro {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
transform: translateY(40px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes finger {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
@keyframes finger {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
/* text rotate */
.box-headline {
font-size: 130px;
line-height: 1.0;
}
.box-words-wrapper {
display: inline-block;
position: relative;
}
.box-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
}
.box-words-wrapper b.is-visible {
position: relative;
}
.no-js .box-words-wrapper b {
opacity: 0;
}
.no-js .box-words-wrapper b.is-visible {
opacity: 1;
}
.box-headline.rotate-2 .box-words-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
}
.box-headline.rotate-2 i,
.box-headline.rotate-2 em {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.box-headline.rotate-2 b {
opacity: 0;
}
.box-headline.rotate-2 i {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);
opacity: 0;
}
.is-visible .box-headline.rotate-2 i {
opacity: 1;
}
.box-headline.rotate-2 i.in {
-webkit-animation: box-rotate-2-in 0.4s forwards;
animation: box-rotate-2-in 0.4s forwards;
}
.box-headline.rotate-2 i.out {
-webkit-animation: box-rotate-2-out 0.4s forwards;
animation: box-rotate-2-out 0.4s forwards;
}
.box-headline.rotate-2 em {
-webkit-transform: translateZ(20px);
transform: translateZ(20px);
}
.no-csstransitions .box-headline.rotate-2 i {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 0;
}
.no-csstransitions .box-headline.rotate-2 i em {
-webkit-transform: scale(1);
transform: scale(1);
}
.no-csstransitions .box-headline.rotate-2 .is-visible i {
opacity: 1;
}
@-webkit-keyframes box-rotate-2-in {
0% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0deg);
}
}
@keyframes box-rotate-2-in {
0% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(-10deg);
transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0deg);
transform: translateZ(-20px) rotateX(0deg);
}
}
@-webkit-keyframes box-rotate-2-out {
0% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-90deg);
}
}
@keyframes box-rotate-2-out {
0% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0);
transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-100deg);
transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-90deg);
transform: translateZ(-20px) rotateX(-90deg);
}
}
/* footer
==================================================*/
footer {
padding: 30px 0;
text-align: center;
background: #f5f5f5
}
.copyright {
color: #ccc;
margin-bottom: 0;
}
footer img {
margin: 0 auto;
}
/* backto top
==================================================*/
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 20px;
line-height: 40px;
font-size: 20px;
right: 10px;
text-align: center;
color: #fff;
background: #02FA79;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover,
.no-touch .cd-top:focus {
background-color: #02FA79;
opacity: 1;
color: #fff;
}
/* About page
==================================================*/
.top-bar {
color: #333;
padding: 150px 0 150px;
background: -webkit-linear-gradient( rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/01.jpg);
background: linear-gradient( rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/01.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center center;
text-align: center;
}
.top-bar h1 {
font-size: 60px;
text-transform: uppercase;
font-weight: 700;
color: #999;
line-height: 50px;
}
.top-bar p {
font-size: 15px;
text-transform: uppercase;
font-weight: 500;
color: #777;
}
.top-bar p a {
color: #777;
}
.top-bar p a:hover,
.top-bar p a:focus {
color: #555;
text-decoration: none;
}
.social-ul {
list-style: none;
display: inline-block;
padding-left: 0;
}
.social-ul li {
margin: 0 10px;
float: left;
}
.social-ul li a {
font-size: 25px;
color: #555;
-webkit-transition: all .3s;
transition: all .3s;
}
.social-ul li a:hover {
color: #888;
}
/* Services page
==================================================*/
.size-50 {
font-size: 50px;
}
.service-box {
margin-bottom: 30px;
}
.service-box h3 {
margin-top: 0;
}
/* contact page
==================================================*/
.details-text i {
margin-right: 10px;
}
.textarea-contact {
height: 200px;
width: 100%;
border: solid 1px rgba(0, 0, 0, .1);
position: relative;
}
.textarea-contact textarea {
height: 100%;
width: 100%;
border: 0;
padding: 20px;
background-color: transparent;
float: left;
z-index: 2;
font-size: 14px;
color: #9a9a9a;
resize: none;
}
.textarea-contact > span {
position: absolute;
top: 20px;
left: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 12px;
text-transform: uppercase;
color: #cdcdcd;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
z-index: 1;
}
.input-contact {
height: 40px;
width: 100%;
border: solid 1px rgba(0, 0, 0, .1);
position: relative;
margin-bottom: 30px;
}
.input-contact input[type="text"] {
height: 100%;
width: 100%;
border: 0;
padding: 0 20px;
float: left;
position: relative;
background-color: transparent;
z-index: 2;
font-size: 14px;
color: #9a9a9a;
}
.input-contact > span {
position: absolute;
top: 50%;
left: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 12px;
text-transform: uppercase;
color: #cdcdcd;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
z-index: 1;
}
.input-contact > span.active,
.textarea-contact > span.active {
color: #02FA79;
font-size: 10px;
top: 0px;
left: 5px;
background-color: #fff;
padding: 5px
}
input:focus,
textarea:focus {
outline: none;
}
.contact-info {
margin-top: 20px;
}
.contact-info i {
height: 30px;
width: 30px;
display: inline-block;
background: #02FA79;
text-align: center;
line-height: 33px;
margin-right: 10px;
color: #fff;
font-size: 21px;
}
.contact-info p {
display: inline-block;
margin-right: 20px;
}
.btn-box {
background: #02FA79;
padding: 10px 50px;
border-radius: 0;
color: #fff;
margin-top: 20px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
}
.btn-box:hover,
.btn-box:focus {
background: #F5B700;
color: #fff;
}
/* single project page
==================================================*/
.cat-ul {
padding-left: 0;
list-style: none
}
.cat-ul li i {
margin-right: 10px;
color: #02FA79;
}
/* Responsive media queries
==================================================*/
@media (max-width: 991px) {
.portfolio .categories-grid span {
margin-bottom: 0;
text-align: center;
width: 100%;
}
.portfolio .categories-grid .categories ul li {
text-align: center;
}
.portfolio .categories-grid .categories ul li a {
margin-left: 0;
}
.col-md-6 h3 {
margin-top: 30px;
}
}
@media only screen and (max-width: 670px) {
.box-headline {
font-size: 100px;
}
.box-intro h5 {
font-size: 12px;
}
.box-primary-nav a {
padding: 5px 1em;
font-size: 14px;
}
.box-primary-nav {
padding: 80px 0 0;
}
.box-primary-nav .box-social a {
font-size: 23px;
}
.top-bar h1 {
font-size: 40px;
line-height: 30px;
}
.portfolio .categories-grid .categories ul li {
float: none;
}
}
@media only screen and (max-width: 520px) {
.box-headline {
font-size: 80px;
}
.box-intro h5 {
font-size: 12px;
}
.main-container {
padding: 50px 0;
}
}
@media only screen and (max-width: 420px) {
.box-headline {
font-size: 50px;
}
.box-intro h5 {
font-size: 12px;
}
.top-bar h1 {
font-size: 30px;
line-height: 30px;
}
}
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no">
<section class="box-intro">
<div class="table-cell">
<h1 class="box-headline letters rotate-2">
<span class="box-words-wrapper">
<b class="is-visible">design.</b>
<b> coding.</b>
<b> graphics.</b>
<b>imagination.</b>
</span>
</h1>
<h5>The perfect combination to your websites success </h5>
</div>
</div>
</section>
答案 0 :(得分:0)
显示:表似乎导致问题。更改为显示块,您将能够控制元素的宽度。
更新:.box-words-wrapper导致问题。 Css规则在下面添加。
.box-intro {
text-align: center;
display: block;
height: 100vh;
width: 100%;
}
.box-intro .table-cell {
display: block;
vertical-align: middle;
}
.box-words-wrapper {
display: inline-block;
position: relative;
width: 100%!important;
}