0
モバイルビューでランディングページをテストすると、画像の両側に奇妙なスペースがあり、ユーザーがスクロールして空白を表示できるようになります。どのようにこれを修正することができますか？私はちょうどそれが崩壊して、モバイルビューでテキストが付いた1つのイメージとして見栄えがいいと思う。ありがとう。私はそれがこのように見えるようにしますtutorialしかし、私は横に白いスペースを得ています。モバイルビューでフルイメージランディングページを反応させるにはどうすればよいですか？
*{
margin:0;
padding:0;
}
.fade-in{
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
}
@keyframes animationFrames{
0% {
opacity:0;
transform: translate(0px,-25px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
@-moz-keyframes animationFrames{
0% {
opacity:0;
-moz-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
@-webkit-keyframes animationFrames {
0% {
opacity:0;
-webkit-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
@-o-keyframes animationFrames {
0% {
opacity:0;
-o-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
@-ms-keyframes animationFrames {
0% {
opacity:0;
-ms-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
#showcase{
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8Ilf-i2TXplUrTBJ-ugwuyd8X8mxhgMD44UQOvcawkbXx2IzNKBLWVrLA');
background-size:cover;
background-position:center;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding: 0 20px;
}
#showcase h1{
font-size:50px;
line-height:1.2;
color:#fff;
font-family: montserrat;
letter-spacing: 10px;
}
#showcase h2{
font-size:25px;
line-height:1.2;
color:#fff;
font-family: montserrat;
}
#showcase .button{
font-size:18px;
text-decoration:none;
color:darkgreen;
padding: 10px 20px;
border-radius:10px;
margin-top:20px
}
#showcase .button:hover{
background-color: darkgreen;
color:#fff;
}
#logo {
z-index: 1;
position: absolute;
float: left;
height: 30px;
padding: 7px;
}/*effects the post logo in the top left of the page*/<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="wrapper fade-in">
<header id="showcase">
<h1>TITLE HERE</h1>
<h2>2017</h2>
<a href="landing2.html" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a>
</header>
</div>
</div>
</body>
あなたはどのブラウザを使用していますか？ – MarioZ