Estaba trabajando en el diseño web de una landing page, esta montada actualmente en http://nortainer.com.ar/ tengo el problema de que en algunos celulares las imagenes se estiran:
Pero cuando hago las pruebas desde chrome, al probar el diseño responsive, en ningun momento se estiran asi, todo pinta que funciona bien pero en algunas resoluciones de celulares algo falla. Podrian ayudarme a darme cuenta de que podria ser? Seguramente alguna propiedad del CSS esta mal pero no logro dar con ella y no puedo probar bien si se corrigio o no el error (desde mi celular se ve bien, y desde diferentes extensiones para ver la pagina en otras resoluciones tambien se ve bien, solo pasa con algunos celulares)
@font-face {
font-family:GothamBook;
src: url(fuentes/Gotham-Font/GothamBook.ttf);
}
@font-face {
font-family:GothamBold;
src: url(fuentes/Gotham-Font/GothamBold.ttf);
}
body{
color:#3fa4a7;
}
p{
margin: 0.3px;
font-family: GothamBook;
}
h3{
margin: 0.3px;
font-family: GothamBold;
}
.superior{
background: #0c3f6a;
}
.row.logo{
margin-top:5%;
margin-bottom: 5%;
}
.row.leyenda{
margin-bottom: 5%;
}
#separador{
z-index: 1;
transform: translate(0px,10px);
}
.inferior{
margin-top: 3%;
background-color: #fff;
}
.izquierda{
margin-right: 2%;
}
.derecha{
margin-left: 2%;
}
.redes{
margin-top: 10%;
}
#fb{
margin-left: 39%;
}
.img-responsive {
max-width: 100%;
}
/* MEDIA QUERIES*/
@media (max-width: 530px) {
img {
width: 60%;
}
img.redes {
width:40px;
height:40px;
}
.inferior{
margin-top: 6%;
}
p{
font-size:0.8rem;
}
h3{
font-size:1rem;
}
.izquierda{
margin-right: 2%;
}
.derecha{
margin-left: 2%;
}
.redes{
width: 30px;
height: 30px;
}
#fb{
margin-left: 0px;
}
}
@media (max-width: 370px){
.inferior{
margin-top: 9%;
}
}
@media (max-width: 300px){
#separador{
z-index: 1;
transform: translate(0px,5px);
}
.izquierda{
margin-right: 0%;
}
.derecha{
margin-left: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="styles2.css">
<title>Nortainer</title>
</head>
<body>
<div class="row">
<!-- PARTE SUPERIOR -->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 superior">
<div class="row logo d-flex justify-content-center principal">
<img src="imagenes/iso.png" alt="Isologo Nortainer" class="img-responsive">
</div>
<div class="row leyenda d-flex justify-content-center principal">
<img src="imagenes/under.png" alt="Sitio Web en Desarrollo" class="img-responsive">
</div>
<div class="row d-flex justify-content-center">
<img src="imagenes/separator.png" alt="Separador" id="separador" class="img-responsive">
</div>
</div>
<!-- PARTE INFERIOR -->
<div class="w-100"></div> <!-- Salto de linea bootstrap -->
<div class="col inferior">
<div class="row justify-content-center">
<div class="col-auto izquierda">
<h3>Corrientes</h3>
<p>Tel: 3794689731</p>
<p>[email protected]</p>
<p>Av. Maipú 5050</p>
<p>Corrientes, Capital.</p>
</div>
<div class="col-auto derecha">
<h3>Seguinos en</h3>
<a href="#"> <!-- link de fb -->
<img alt="FB" src="imagenes/fb.png" width="50" height="50" class="redes">
</a>
<a href="#"> <!-- link de ig -->
<img alt="IG" src="imagenes/ig.png" width="50" height="50" id="fb" class="redes">
</a>
</div>
</div>
</div>
</div>
</body>
</html>