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;
}
}