0

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.

 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>  

1 respuesta 1

0

ahi te arregle el codigo un poco, luego a partir de ahi ya podras modificarlo mas aun, un consejo es que uses siempre porcentajes para los tamaños, a no ser que sepas que algo no va a afectar a la estuctura de la pagina, como padding etc espero sea lo que querias buscar. el html puede quedar igual.

CSS:

body {
  margin: 0px;
  min-width: 340px; /*le colocamos un min whidt para que no se rompa el ancho*/
}

.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;
  justify-content: center;
  padding: 7px;
}

.presentacion-portada {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 43px;
  line-height: 60px;
  color: #1e0e62;
  margin-left: 20%; /*es mejor utilizar porcentaje para paginas responsive*/
}

.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: 20%; /*es mejor utilizar porcentaje para paginas responsive*/
}

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

@media (max-width: 500px) {
  /*A PARTIR DE 500PX LO VEO MAS CORRECTO*/
  .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;
  }

  .presentacion-portada {
    margin-left: 0 !important; /*le quitamos el margin que tenia para que valla al inicio del ancho*/
  }

  .introduccion-portada {
    margin-left: 0 !important; /*le quitamos el margin que tenia para que valla al inicio del ancho*/
  }

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

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.