Skip to main content
Correcciones ortográficas, formato agregado, meta-etiqueta y ruido removidos
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

Tengo un problema con este diseño para hacerlo responsivo correctamente. El media Query que agrego es como que no me lo toma correctamente el navegador. He intentando ya varias cosas y lo mejor que me saliosalió es el codigocódigo que ingreso aquiaquí. Si achican las dimensiones hasta los 360px de width el fondo se parte y el h1h1 nunca se achica. Agradezco de antemano la ayuda que me puedan brindar.

Esta es mi primera pregunta en esta comunidad y si hay algo mal en ella por favor haganmelo saber.

Saludos.

Tengo un problema con este diseño para hacerlo responsivo correctamente. El media Query que agrego es como que no me lo toma correctamente el navegador. He intentando ya varias cosas y lo mejor que me salio es el codigo que ingreso aqui. Si achican las dimensiones hasta los 360px de width el fondo se parte y el h1 nunca se achica. Agradezco de antemano la ayuda que me puedan brindar.

Esta es mi primera pregunta en esta comunidad y si hay algo mal en ella por favor haganmelo saber.

Saludos.

Tengo un problema con este diseño para hacerlo responsivo correctamente. El media Query que agrego es como que no me lo toma correctamente el navegador. He intentando ya varias cosas y lo mejor que me salió es el código que ingreso aquí. Si achican las dimensiones hasta los 360px de width el fondo se parte y el h1 nunca se achica.

se añadieron 577 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

Buenas tardes!

Tengo un problema con este diseño para hacerlo responsivo correctamente. El media Query que agrego es como que no me lo toma correctamente el navegador. He intentando ya varias cosas y lo mejor que me salio es el codigo que ingreso aqui. Si achican las dimensiones hasta los 360px de width el fondo se parte y el h1 nunca se achica. Agradezco de antemano la ayuda que me puedan brindar.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
        rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
         rel="stylesheet">
        <title>Template HolaJuniors</title>
    </head>
    <body>
        <header class="contenedor-header">
            <h1 class="texto-header">HolaJunior.com</h1>
            <button class="boton-header">Email</button>
        </header>
        <main>
            <div class="principal-portada" >
                <div>
                <h1 class="presentacion-portada">Hola, Soy Facundo. Soy Frontend Developer</h1>
                <p class="introduccion-portada">Pon aqui una breve introduccion sobre ti, a que te dedicas, tu experiencia
                y cualquier hito importante en tu carrera y/o estudios. </p>
                </div>
                <img class="foto-portada" src="Imagenes/Gato-Template.png" alt="Gato-portada" border="0">
            </div>
        </main>
    </body>
</html>  

   


 body{
        margin: 0px;
    }
    
    .contenedor-header{
        width: 100vv;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 30px;
        line-height: 60px;
        color: #1E0E62;
    }

    .boton-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        align-items: center;
        text-align: center;
        color: #1E0E62;
        border: 2px solid #EBEAED;
        border-radius: 100px;
        width: 80px;
        height: 40px;
}

.principal-portada{
    display: flex;
    background-color:  #F1F1F1;
    align-items: center;
}

.presentacion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 43px;
    line-height: 60px;
    color: #1E0E62;
    margin-left: 180px;
}

.introduccion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    color: rgba(21, 20, 57, 0.4);
    mix-blend-mode: normal;
    margin-left: 80px;
}

.foto-portada{
    width: 570px;
    height: 451px;
    margin-right: 80px;
    margin-top: 20px;
    margin-bottom: 40px;
}


@media (max-width: 360px) { 
    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        line-height: 60px;
        color: #1E0E62;
    }

    .principal-portada{
        flex-direction: column;
    }

    .foto-portada{
        width: 359px;
        height: 236px;
    }
}


  

 body{
        margin: 0px;
    }
    
    .contenedor-header{
        width: 100vv;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 30px;
        line-height: 60px;
        color: #1E0E62;
    }

    .boton-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        align-items: center;
        text-align: center;
        color: #1E0E62;
        border: 2px solid #EBEAED;
        border-radius: 100px;
        width: 80px;
        height: 40px;
}

.principal-portada{
    display: flex;
    background-color:  #F1F1F1;
    align-items: center;
}

.presentacion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 43px;
    line-height: 60px;
    color: #1E0E62;
    margin-left: 180px;
}

.introduccion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    color: rgba(21, 20, 57, 0.4);
    mix-blend-mode: normal;
    margin-left: 80px;
}

.foto-portada{
    width: 570px;
    height: 451px;
    margin-right: 80px;
    margin-top: 20px;
    margin-bottom: 40px;
}


@media (max-width: 360px) { 
    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        line-height: 60px;
        color: #1E0E62;
    }

    .principal-portada{
        flex-direction: column;
    }

    .foto-portada{
        width: 359px;
        height: 236px;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
        rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
         rel="stylesheet">
        <title>Template HolaJuniors</title>
    </head>
    <body>
        <header class="contenedor-header">
            <h1 class="texto-header">HolaJunior.com</h1>
            <button class="boton-header">Email</button>
        </header>
        <main>
            <div class="principal-portada" >
                <div>
                <h1 class="presentacion-portada">Hola, Soy Facundo. Soy Frontend Developer</h1>
                <p class="introduccion-portada">Pon aqui una breve introduccion sobre ti, a que te dedicas, tu experiencia
                y cualquier hito importante en tu carrera y/o estudios. </p>
                </div>
                <img class="foto-portada" src="Imagenes/Gato-Template.png" alt="Gato-portada" border="0">
            </div>
        </main>
    </body>
</html>  

Buenas tardes!

Tengo un problema con este diseño para hacerlo responsivo correctamente. El media Query que agrego es como que no me lo toma correctamente el navegador. He intentando ya varias cosas y lo mejor que me salio es el codigo que ingreso aqui. Si achican las dimensiones hasta los 360px de width el fondo se parte y el h1 nunca se achica. Agradezco de antemano la ayuda que me puedan brindar.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
        rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
         rel="stylesheet">
        <title>Template HolaJuniors</title>
    </head>
    <body>
        <header class="contenedor-header">
            <h1 class="texto-header">HolaJunior.com</h1>
            <button class="boton-header">Email</button>
        </header>
        <main>
            <div class="principal-portada" >
                <div>
                <h1 class="presentacion-portada">Hola, Soy Facundo. Soy Frontend Developer</h1>
                <p class="introduccion-portada">Pon aqui una breve introduccion sobre ti, a que te dedicas, tu experiencia
                y cualquier hito importante en tu carrera y/o estudios. </p>
                </div>
                <img class="foto-portada" src="Imagenes/Gato-Template.png" alt="Gato-portada" border="0">
            </div>
        </main>
    </body>
</html>  

   


 body{
        margin: 0px;
    }
    
    .contenedor-header{
        width: 100vv;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 30px;
        line-height: 60px;
        color: #1E0E62;
    }

    .boton-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        align-items: center;
        text-align: center;
        color: #1E0E62;
        border: 2px solid #EBEAED;
        border-radius: 100px;
        width: 80px;
        height: 40px;
}

.principal-portada{
    display: flex;
    background-color:  #F1F1F1;
    align-items: center;
}

.presentacion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 43px;
    line-height: 60px;
    color: #1E0E62;
    margin-left: 180px;
}

.introduccion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    color: rgba(21, 20, 57, 0.4);
    mix-blend-mode: normal;
    margin-left: 80px;
}

.foto-portada{
    width: 570px;
    height: 451px;
    margin-right: 80px;
    margin-top: 20px;
    margin-bottom: 40px;
}


@media (max-width: 360px) { 
    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        line-height: 60px;
        color: #1E0E62;
    }

    .principal-portada{
        flex-direction: column;
    }

    .foto-portada{
        width: 359px;
        height: 236px;
    }
}


  

Tengo un problema con este diseño para hacerlo responsivo correctamente. El media Query que agrego es como que no me lo toma correctamente el navegador. He intentando ya varias cosas y lo mejor que me salio es el codigo que ingreso aqui. Si achican las dimensiones hasta los 360px de width el fondo se parte y el h1 nunca se achica. Agradezco de antemano la ayuda que me puedan brindar.

 body{
        margin: 0px;
    }
    
    .contenedor-header{
        width: 100vv;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 30px;
        line-height: 60px;
        color: #1E0E62;
    }

    .boton-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        align-items: center;
        text-align: center;
        color: #1E0E62;
        border: 2px solid #EBEAED;
        border-radius: 100px;
        width: 80px;
        height: 40px;
}

.principal-portada{
    display: flex;
    background-color:  #F1F1F1;
    align-items: center;
}

.presentacion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 43px;
    line-height: 60px;
    color: #1E0E62;
    margin-left: 180px;
}

.introduccion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    color: rgba(21, 20, 57, 0.4);
    mix-blend-mode: normal;
    margin-left: 80px;
}

.foto-portada{
    width: 570px;
    height: 451px;
    margin-right: 80px;
    margin-top: 20px;
    margin-bottom: 40px;
}


@media (max-width: 360px) { 
    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        line-height: 60px;
        color: #1E0E62;
    }

    .principal-portada{
        flex-direction: column;
    }

    .foto-portada{
        width: 359px;
        height: 236px;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
        rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
         rel="stylesheet">
        <title>Template HolaJuniors</title>
    </head>
    <body>
        <header class="contenedor-header">
            <h1 class="texto-header">HolaJunior.com</h1>
            <button class="boton-header">Email</button>
        </header>
        <main>
            <div class="principal-portada" >
                <div>
                <h1 class="presentacion-portada">Hola, Soy Facundo. Soy Frontend Developer</h1>
                <p class="introduccion-portada">Pon aqui una breve introduccion sobre ti, a que te dedicas, tu experiencia
                y cualquier hito importante en tu carrera y/o estudios. </p>
                </div>
                <img class="foto-portada" src="Imagenes/Gato-Template.png" alt="Gato-portada" border="0">
            </div>
        </main>
    </body>
</html>  

Origen Enlace

No puedo realizar un correcto responsive con media query

Buenas tardes!

Tengo un problema con este diseño para hacerlo responsivo correctamente. El media Query que agrego es como que no me lo toma correctamente el navegador. He intentando ya varias cosas y lo mejor que me salio es el codigo que ingreso aqui. Si achican las dimensiones hasta los 360px de width el fondo se parte y el h1 nunca se achica. Agradezco de antemano la ayuda que me puedan brindar.

Esta es mi primera pregunta en esta comunidad y si hay algo mal en ella por favor haganmelo saber.

Saludos.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
        rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap" 
         rel="stylesheet">
        <title>Template HolaJuniors</title>
    </head>
    <body>
        <header class="contenedor-header">
            <h1 class="texto-header">HolaJunior.com</h1>
            <button class="boton-header">Email</button>
        </header>
        <main>
            <div class="principal-portada" >
                <div>
                <h1 class="presentacion-portada">Hola, Soy Facundo. Soy Frontend Developer</h1>
                <p class="introduccion-portada">Pon aqui una breve introduccion sobre ti, a que te dedicas, tu experiencia
                y cualquier hito importante en tu carrera y/o estudios. </p>
                </div>
                <img class="foto-portada" src="Imagenes/Gato-Template.png" alt="Gato-portada" border="0">
            </div>
        </main>
    </body>
</html>  

   


 body{
        margin: 0px;
    }
    
    .contenedor-header{
        width: 100vv;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 30px;
        line-height: 60px;
        color: #1E0E62;
    }

    .boton-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        align-items: center;
        text-align: center;
        color: #1E0E62;
        border: 2px solid #EBEAED;
        border-radius: 100px;
        width: 80px;
        height: 40px;
}

.principal-portada{
    display: flex;
    background-color:  #F1F1F1;
    align-items: center;
}

.presentacion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 43px;
    line-height: 60px;
    color: #1E0E62;
    margin-left: 180px;
}

.introduccion-portada{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    color: rgba(21, 20, 57, 0.4);
    mix-blend-mode: normal;
    margin-left: 80px;
}

.foto-portada{
    width: 570px;
    height: 451px;
    margin-right: 80px;
    margin-top: 20px;
    margin-bottom: 40px;
}


@media (max-width: 360px) { 
    .texto-header{
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        line-height: 60px;
        color: #1E0E62;
    }

    .principal-portada{
        flex-direction: column;
    }

    .foto-portada{
        width: 359px;
        height: 236px;
    }
}