2017-12-21 39 views
0

Ich habe einige Probleme mit Änderungen auf dieser Website http://rocainternacional.org/2018/ In mobilen, können Sie nach rechts scrollen. Warum passiert es? Ich will auch den Videoüberlauf versteckt und so etwas wie Größe Abdeckung machen ..Video mit Überlauf nicht versteckt bei Handy

.body { 
 
    overflow: hidden; 
 
} 
 

 
.titulos { 
 
\t margin-top: 200px; 
 
\t padding: 0 100px; 
 
\t margin-bottom: 200px; 
 
} 
 
.titulos2 { 
 
\t margin-top: 300px; 
 
\t padding: 0 100px; 
 
\t margin-bottom: 200px; 
 
} 
 
.titulo-1 { 
 
\t background-color: rgba(255, 255, 255, 0.8); 
 
\t color: rgb(0, 153, 120); 
 
} 
 
.titulo-1 h2 { 
 
\t margin-bottom: 0; 
 
\t margin-top: 0; 
 
\t padding: 20px; 
 
\t font-weight: 300; 
 
\t padding-left: 70px; 
 
\t font-size: 35px; 
 
} 
 
.titulo-2 { 
 
\t background-color: rgba(0, 153, 120, 0.5); 
 
\t color: rgb(255, 255, 255); 
 
} 
 
.titulo-2 h2 { 
 
\t margin-top: 0 !important; 
 
\t font-size: 30px; 
 
\t padding: 50px; 
 
\t padding-left: 70px; 
 
} 
 
.boton-right { 
 
\t display: flex; 
 
    justify-content: flex-end; 
 
} 
 
.titulo-boton { 
 
\t background-color: #001F4A; 
 
\t margin-top: 0; 
 
\t margin-bottom: 0; 
 
\t padding: 15px 30px; 
 
} 
 
.titulo-boton a { 
 
\t color: #fff; 
 
\t font-weight: 300; 
 
\t font-size: 20px 
 
} 
 

 
.footer-title { 
 
\t margin: 0 auto; 
 
\t margin-top: 30px; 
 
} 
 

 
.item-1, 
 
.item-2, 
 
.item-3 { 
 
\t position: absolute; 
 
    display: block; 
 
\t /*top: 2em;*/ 
 
    width: 60%; 
 
    padding-left: 0px; 
 
    font-size: 2em; 
 

 
\t animation-duration: 10s; 
 
\t animation-timing-function: ease-in-out; 
 
\t animation-iteration-count: infinite; 
 
} 
 

 
.item-1{ 
 
\t animation-name: anim-1; 
 
} 
 

 
.item-2{ 
 
\t animation-name: anim-2; 
 
} 
 

 
.item-3{ 
 
\t animation-name: anim-3; 
 
} 
 

 
@keyframes anim-1 { 
 
\t 0%, 8.3% { left: -100%; opacity: 0; } 
 
    8.3%,25% { left: 25%; opacity: 1; } 
 
    33.33%, 100% { left: 110%; opacity: 0; } 
 
} 
 

 
@keyframes anim-2 { 
 
\t 0%, 33.33% { left: -100%; opacity: 0; } 
 
    41.63%, 58.29% { left: 25%; opacity: 1; } 
 
    66.66%, 100% { left: 110%; opacity: 0; } 
 
} 
 

 
@keyframes anim-3 { 
 
\t 0%, 66.66% { left: -100%; opacity: 0; } 
 
    74.96%, 91.62% { left: 25%; opacity: 1; } 
 
    100% { left: 110%; opacity: 0; } 
 
} 
 

 
@media only screen and (max-width: 2000px) { 
 
\t .titulo-1 { 
 
\t \t width: 350px; 
 
\t } 
 

 
\t .item-1, .item-2, .item-3 { 
 
\t \t width: 50%; 
 
\t \t padding-left: 50px !important; 
 
\t } 
 
} 
 

 
@media only screen and (max-width: 1700px) { 
 
\t .item-1, .item-2, .item-3 { 
 
\t \t width: 55%; 
 
\t \t padding-left: 0px !important; 
 
\t } 
 
} 
 

 
.text-blue { 
 
\t color: #337ab7 !important; 
 
} 
 

 
.opinion { 
 
\t margin-bottom: 30px; 
 
}
 <!-- HTML CODE --> 
 
     <!-- Here are the slider elements --> 
 
     <!-- In desktop overflow: hidden works fine, but in mobile it doesnt --> 
 

 
\t \t \t <div class="container titulos" id="slideshow"> 
 
\t \t \t \t <div class="row titulo-1"> 
 
\t \t \t \t \t <h2>Bienvenidos a R.O.C.A. Internacional</h2> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row titulo-2" style="height: 200px"> 
 
\t \t \t \t \t <h2 class="item-1 no-padding-left">Capacitación profesional en todas las especialidades de la Odontología con Certificación Universitaria.</h2> 
 
\t \t \t \t \t <h2 class="item-2 no-padding-left">Diplomados de alto nivel, dictado por docentes de reconocimiento intenacional.</h2> 
 
\t \t \t \t \t <h2 class="item-3 no-padding-left">Red Odontológica de Capacitación Internacional.</h2> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="row boton-right"> 
 
\t \t \t \t \t <div class="titulo-boton"> 
 
\t \t \t \t \t \t <a href="" class="">Conocer más</a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

In Desktop die overflow: hidden funktioniert gut, aber in der mobilen es tut .. Jede vorschlagen?

EDIT: Ich habe diesen Meta-Tag auf den Kopf und es hat den Trick

HINWEIS: Wie ich diesen Beitrag setzen als getan?

+0

Sie versuchen, sollte es eine max-width Eigenschaft geben , Hintergrund-Größe: Cover oder Hintergrund-Wiederholung: keine Wiederholung – springathing

+0

versucht, aber nichts passiert .. Ich denke, es ist für die gleitenden Worte in der Mitte, wenn sie aus den Bildschirmen wird es scrollbar, aber ich habe einen Überlauf: versteckt auf es und nichts .. –

+0

Sie sollten den Code, den Sie für die Platzierung des Videos verwendet haben, nur als einige Kontext – springathing

Antwort

0

Try Body-Tag Überlauf versteckt ..

+0

Die Body-Tag haben diese Eigenschaft, aber nicht funktioniert .. –

+0

Versuchen Sie, Überlauf-x: versteckte – nah

+0

versuchte auch, funktioniert nicht: \ –

0

Dieser Meta-Tag hat der Trick

Jetzt auf mobilen es funktioniert perfekt ..

Verwandte Themen