Y estaba intentando hacer una pagina html para un sitio en mantencion, responsivo.
entonces tengo dos fondos. Uno para Navegador PC y otro para moviles y tengo iconos de redes sociales que al hacer click te redirigen a la red social, son 6.
El tema es que al empezar a minimizar la pagina los iconos no se ajustan. Como puedo arreglarlo? es para una tarea en la uni.
El código que tengo es el siguiente.
<!DOCTYPE html>
<html>
<title></title>
<head>
<title>Aguas Andinas Mantenimiento</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
@media screen and (min-width: 600px){
body {
background-image: url(aguasandinas.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
}
@media only screen and (max-width: 599px) {
body {
background-image: url(fondo_360x640_OV_en_mantencion_sin-rrss.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
}
</style>
<body>
<div class="row-fluid" style="margin-top: 27%"></div>
<div class="row" style="margin-left: 6.5%; margin-right: 14% " >
<div class="col-md-2"></div>
<div class="col-md-3" style="padding-left: 3%" >
<a title="Facebook" href="https://es-la.facebook.com/AguasAndinas.oficial/"><img src="rrssfb.png" width="40" height="40" alt="Facebook"/></a>
</div>
<div class="col-md-3" style="padding-left: 1%">
<a title="Twitter" href="https://twitter.com/aguas_andinas"><img src="twitter.png" width="40" height="40" alt="Twitter" /></a>
</div>
<div class="col-md-2" style="padding-left: 1%" >
<a title="Youtube" href="https://www.youtube.com/channel/UCP71zwHDDF17volKMhXOJAg"><img src="youtube.png" width="40" height="40" alt="Youtube" /></a>
</div>
<div class="col-md-2"></div>
</div>
<div class="row" style="margin-left: 6.5%; margin-right: 14%; margin-top: 2% " >
<div class="col-md-2"></div>
<div class="col-md-3" style="padding-left: 3%" >
<a title="Linkdn" href="https://www.linkedin.com/company/aguas-andinas/?originalSubdomain=cl"><img src="linkedin.png" width="40" height="40" alt="Linkdn" /></a>
</div>
<div class="col-md-3" style="padding-left: 1%">
<a title="Telefono"><img src="telefono.png" width="40" height="40" alt="Telefonos" /></a>
</div>
<div class="col-md-2" style="padding-left: 1%" >
<a title="www"><img src="www.png" width="40" height="40" alt="www" /></a>
</div>
<div class="col-md-2"></div>
</div>
</body>
</html>
