0
이 사이트에서 변경 작업 중 일부 문제가 있습니다. http://rocainternacional.org/2018/ 모바일에서는 오른쪽으로 스크롤 할 수 있습니다. 왜 그런 일이 일어나는거야? 나는 .. 비디오 오버 플로우가 숨겨진 너무 크기 커버 같은 것을 만들고 싶어 오버플로가있는 비디오가 모바일에 숨겨져 있지 않습니다.
.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>오버 플로우
: 작품 잘 숨겨져 있지만, 모바일에이 모든 제안 .. 나던?편집 : 나는 머리에이 메타 태그를 추가하며
참고 속임수를 썼는지 : 수행으로 난이 게시물을 넣어 어떻게?
했다 , background-size : cover 또는 background-repeat : no-repeat – springathing
시도했지만 아무 일도 일어나지 않습니다. 중간에 슬라이딩 단어가있는 것 같습니다. 화면 밖으로 나올 때 스크롤 할 수있게되지만 오버 플로우가 추가되었습니다. 그것과 아무것도 .. –
비디오의 배치에 사용한 코드를 일부 컨텍스트로 게시해야합니다. – springathing