Jump to content

PROBLEMA SLIDE RESPONSIVE DESIGN


Recommended Posts

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

  • 1 month later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...