No te pierdas nuestras otras creaciones:
La-biblioteca.com | Cineactual.es | Dedemonios.shop


Ayuda con script CSS  Ayuda con script CSS

Valoración de éste post
4.8 / 5 de 1877 votos



Mensajes: 1


Puntos totales:

Enhorabuena!

0




El contenido de este artículo o información está sujeto a una licencia Creative Commons BY (CC-BY), puedes divulgar públicamente este contenido pero deberás hacer mención del autor: chuecopepe e indicar la dirección web de esta página: https://www.exabyteinformatica.com/tienda/foro/ayuda-con-script-css-t2805.html

The content of this article or any related information is under the Creative Commons license BY, you can republish this content freely but you must mention the author of this article: chuecopepe and indicate the URL of this page: https://www.exabyteinformatica.com/tienda/foro/ayuda-con-script-css-t2805.html

Bajo licencia de Creative Commons


Hola,
me dejaron medio colgado con la creación de la pagina:
lo que no logro hacer es que el slider se vea bien para celulares, les adjunto el script, seguro algo me esta faltando quizás puedan ayudarme,
las imágenes miden 1400 x 458 px
muchas gracias.


/* start slider */

.slider{

background: #2e2e2e;

padding-bottom: 8%;

}

.ei-slider{

font-family: 'Maven Pro', sans-serif;

position: relative;

width: 100%;

max-width: 1920px;

height: 450px;

margin: 0 auto;

}

.ei-slider-loading{

width: 100%;

height: 100%;

position: absolute;

top: 0px;

left: 0px;

z-index:999;

background:#fff;

color: #fff;

text-align: center;

line-height: 400px;

}

.ei-slider-large{

height: 100%;

width: 100%;

position:relative;

overflow: hidden;

}

.ei-slider-large li{

position: absolute;

top: 0px;

left: 0px;

overflow: hidden;

height: 100%;

width: 100%;

}

.ei-slider-large li img{

margin-left:0px !important;

}

.ei-title{

position: absolute;

right: 25%;

top: 15%;

}

.btn{

background: #be4a4d;

color: #ffffff;

padding: 25px 12px 10px;

display: inline-block;

line-height: 1.8em;

}

.ei_icons{

padding: 10px 10px 5px;

background: #ffffff;

line-height: 1.8em;

}

.ei-title h2{

font-family: 'Maven Pro', sans-serif;

padding:10px 0 0;

font-size: 2.5em;

line-height: 1.2em;

color: #242424;

text-transform:capitalize;

}

.ei-title h3{

font-family: 'Maven Pro', sans-serif;

padding-top:15px;

font-size: 1.2em;

line-height:1.5em;

color: #ffffff;

}

.ei-title h3.active{

color: #000000;

}

.ei-slider-thumbs{

height: 10px;

margin: 0 auto;

position: relative;

}

.ei-slider-thumbs li{

position: relative;

float: left;

height: 100%;

}

.ei-slider-thumbs li.ei-slider-element{

top: 0px;

left: 0px;

position: absolute;

width:100%;

height: 100%;

z-index: 10;

text-indent: -9000px;

background: #5B6A7F;

background: #be4a4d;

}

.ei-slider-thumbs li a{

text-align:center;

display: block;

background: #000000 ;

width: 100%;

height: 100%;

cursor: pointer;

-webkit-box-shadow:

0px 1px 1px 0px rgba(0,0,0,0.3),

0px 1px 0px 1px rgba(48, 48, 48, 1);

-moz-box-shadow:

0px 1px 1px 0px rgba(0,0,0,0.3),

0px 1px 0px 1px rgba(255,255,255,0.5);

box-shadow:

0px 1px 1px 0px rgba(0,0,0,0.3),

0px 1px 0px 1px rgba(48, 48, 48, 1);

-webkit-transition: background 0.2s ease;

-moz-transition: background 0.2s ease;

-o-transition: background 0.2s ease;

-ms-transition: background 0.2s ease;

transition: background 0.2s ease;

}

.ei-slider-thumbs li a:hover{

background-color: #f0f0f0;

}

.ei-slider-thumbs li a span.active{

color: #ffffff;

}

.ei-slider-thumbs li a span{

padding-top: 30px;

font-size: 1.2em;

display: inline-block;

color: #999999;

text-transform: capitalize;

}

.ei-slider-thumbs li a p{

text-transform:capitalize;

font-size: 0.8125em;

color: #999999;

line-height: 1.8em;

}

.ei-slider-thumbs li img{

position: absolute;

bottom: 50px;

opacity: 0;

z-index: 999;

max-width: 100%;

-webkit-transition: all 0.4s ease;

-moz-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

-ms-transition: all 0.4s ease;

transition: all 0.4s ease;

-webkit-box-reflect:

below 0px -webkit-gradient(

linear,

left top,

left bottom,

from(transparent),

color-stop(50%, transparent),

to(rgba(255,255,255,0.3))

);

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

}

.ei-slider-thumbs li:hover img{

opacity: 1;

bottom: 13px;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}

/***** Media Quries *****/

@media only screen and (max-width: 1366px) {

.wrap{

width:95%;

}

}

@media only screen and (max-width: 1280px) {

.wrap{

width:95%;

}

.ei-title h2 {

font-size: 2em;

}

}

@media only screen and (max-width: 1024px) {

.wrap{

width:95%;

}

.ei-slider-thumbs {

width: 86% !important;

}

.ei-slider-thumbs li a span {

font-size: 1em;

}

.hide{

display: none;

}

.ei-title h2 {

font-size: 1.5em;

}

}

@media only screen and (max-width: 800px) {

.wrap{

width:95%;

}

.hide1{

display: none;

}

.ei-slider-thumbs li a span {

font-size: 13px;

}

.ei-slider-thumbs {

width: 88% !important;

left: 0%;

}

.slider {

padding-bottom: 14%;

}

.ei-slider-thumbs li {

width: 24.3333% !important;

}

.image1_of_3 span {

top: -66px;

}

.image1_of_3 span.tag {

padding: 10px;

font-size: 13px;

}

}

@media only screen and (max-width: 640px) {

.wrap{

width:95%;

}

}

@media only screen and (max-width: 480px) {

.wrap{

width:95%;

}

.ei-title {

right: 5%;

top: 10%;

}

.slider {

padding-bottom: 20%;

}

.image1_of_3 span {

top: -50px;

}

}

@media only screen and (max-width: 320px) {

.wrap{

width:95%;

}

.ei-title {

right: 0%;

top: 10%;

}

.ei-title h3 {

padding-top: 5px;

font-size: 13px;

}

.slider {

padding-bottom: 20%;

}

.image1_of_3 span {

top: -100px;

}

.slider {

padding-bottom: 40%;

}

.image1_of_3 {

float: none;

width: 100%;

margin-left: 0;

text-align: center;

}

}



No te pierdas el tema anterior: Curso rápido completo GRATIS de CSS (YT) (JC)

Salta al siguiente tema: Css dentro o fuera de la pagina

Quizás también te interese:

Volver a CSS