Comment faire en sorte que la page de destination d'une image complète soit adaptée à la vue mobile?

Lors du test de ma page de destination sur la vue mobile, des espaces bizarres de chaque côté de l'image permettent à l'utilisateur de faire défiler et de voir les espaces blancs. Comment cela peut-il être réparé? Je veux juste qu'il s'effondre et soit joli comme une image avec du texte sur la vue mobile. Merci. Je veux que ça ressemble à ça tutorial Mais je continue à avoir des espaces blancs sur les côtés.Comment faire en sorte que la page de destination d'une image complète soit adaptée à la vue mobile?

*{ 
 
    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>

Source

2017-09-18 johnstont05

Quel navigateur utilisez-vous? – MarioZ

Ceci est ma tête page de destination pour le fond et css n'ont pas eu de problèmes avec elle sur mobile ou de bureau:

header { 
    position: relative; 
    width: 100%; 
    overflow-y: hidden; 
    /* fallback for old browsers */ 
    background-image: url("../img/sample.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-position: 50% 0; 
}

Hope this helps.

Source

2017-09-18 22:01:48

Comment faire en sorte que la page de destination d'une image complète soit adaptée à la vue mobile?

Répondre

Questions connexes