Markus Calcerbis Posted October 17, 2014 Report Share Posted October 17, 2014 Hola amigos! Tengo un problema con este slider http://responsiveslides.com/ Cuando lo aplico a mi diseño responsive las img, sin importar el tamaño que tengan, me quedan a a mierda de grandes, si las achico quedan del mismo porte, pero se pixelean. Favor su ayuda, no se como arreglarlo. Dejo el HTML y el CSS a continuación. HTML <!DOCTYPE html> <html lang=esp> <head> <title>Montajes Latinoamericanos</title> <meta charset="utf-8"/> <meta name="description" content="Bienvenido a la web de Montajes Latinoamericanos"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="author" type="text/plain" href="humans.txt"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/responsiveslides.min.js"></script> <script> $(function() { $(".rslides").responsiveSlides(); }); </script> <link rel="stylesheet" href="css/index.css"/> <link rel="stylesheet" href="css/responsiveslides.css"/> <!--[if lt IE9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]>--> </head> <body> <header> <h1> <a href="index.html"> <img class="fade" alt="Montajes Latinoamericanos" src="img/logo_small.png"/> </a> </h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="nosotros.html">Nosotros</a></li> <li><a href="proyectos.html">Proyectos</a></li> <li><a href="contacto.html">Contacto</a></li> </ul> </nav> </header> <section id="contenedor"> <ul class="rslides"> <li><img src="img/slider/img1_min.jpg" alt=""></li> <li><img src="img/slider/img2_min.jpg" alt=""></li> <li><img src="img/slider/img3_min.jpg" alt=""></li> </ul> </section> <footer> Montajes Latinoamericanos | Expertos en Estructuras « Web by <a href="http:www.liquid-apps.cl" target="blank">Liquid-Apps</a> » </footer> </body> </html> CSS *{ border:0; margin:0; padding:0; } article, figcaption, figure, footer, header, hgroup, nav, section{ display: block; } @font-face{ font-family:"Satellite"; src:url(../fonts/Satellite/Satellite.eot); src:url(../fonts/Satellite/Satellite.eot#iefix) format(embedded-opentype), url(../fonts/Satellite/Satellite.woff) format(woff), url(../fonts/Satellite/Satellite.ttf) format(truetype), url(../fonts/Satellite/Satellite.svg) format(svg); font-weight:normal; font-style:normal; } body{ background:#fff; background-image:url(../img/back_index.jpg); background-size:cover; background-position:fixed; color: #000000; font-family: "Satellite"; font-size: 1.3em; } a{ color:#000; text-decoration:none; font-weight:bold; } img, video{ max-width:100%; } header, section#contenedor, footer{ margin:0 auto; max-width:90%; text-align:center; } header h1, nav{ display:inline-block; max-width:100%; vertical-align:middle; } header h1{ margin-right:0.7em; } nav ul{ list-style:none; } nav li { display:inline-block; margin:0.2em; vertical-align:top; } nav a{ border-radius:30px 0 25px 0; display:block; font-size:1.3em; padding:0.3em; transition:all 0.3s ease-in; } nav a:hover{ background:#00497c; border-radius:0 30px 0 25px; color:#fff; transition:all 0.3s ease-out; } footer a{ border-radius:30px 0 25px 0; padding:0.3em; transition:all 0.3s ease-in; } footer a:hover{ background:#0bddea; border-radius:0 30px 0 25px; color:#fff; transition:all 0.3s ease-out; } @media(max-width:600px){ body{ background:#fff; background-image:url(../img/back_media_max600.jpg); background-repeat:no-repeat; background-size:cover; color: #000000; font-size: 1em; } nav li{ display:inline-block; margin-bottom:0.5px; width:90%; } nav a{ background:#00497c; border-radius:30px 30px 0 0; color:#fff; display:block; font-size:1.3em; padding:0.3em; transition:all 0.3s ease-in; } nav a:hover{ background:#00497c; border-radius:0 0 30px 30px; color:#fff; opacity:0.8; transition:all 0.3s ease-out; } section#contenedor{ display:block; margin:0.2em auto; text-align:center; } } /* HASTA AQUI ESTILOS LOGO , MENU, MEDIA-QUERY Y ENLACES */ Link to comment Share on other sites More sharing options...
aspc-2 Posted December 7, 2014 Report Share Posted December 7, 2014 Después del contenedor inserta el slide en una clase row para limitarlo a solo este Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now