0

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: Screen_desde_celular

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>

1 respuesta 1

1

Te comparto una lista de media queries que pueden salvarte mucho tiempo. Usa las que se adapten a tu proyecto. Recomiendo las que tienen el tipo and para que puedas ahorrar código.

* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
1
  • Gracias! pude solucionarlo, era un bug de visualizacion que solo tenian los sistemas IOS, muy raro.
    – user194029
    Commented el 12 oct. 2020 a las 4:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.