Tengo que hacer mi web responsive y no se como hacerlo, intento pero nada me funciona.
Estuve mirando videos en youtube y no encontré la respuesta, probé con @media screen
pero no estoy seguro de donde debo ponerlo y si es correcto utilizarlo.
Si alguien me puede ayudar se lo agradezco mucho!
Este es el código:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background: url(/img/leadspace.jpg);
height: 450px;
background-size: cover;
background-repeat: no-repeat;
padding: 40px;
width: 100%;
}
section {
color: #fff;
min-width: 1000px;
margin: auto;
}
.home {
flex-wrap: wrap;
}
.titulo {
font-size: 40px;
padding: 30px;
}
.contenido {
text-align: center;
}
.contenido p {
font-size: 35px;
margin: 1em 0;
font-weight: bold;
font-family: 'Oswald', sans-serif;
}
#general {
margin: auto;
width: 1550px;
height: 800px;
color: rgb(0, 0, 0);
font-family: 'Nanum Gothic', sans-serif;
}
.parrafo1 {
margin: auto;
margin: 1em 0;
}
<header>
<section>
<h1 class="titulo">Ciberseguridad</h1>
<div class="contenido">
<p>¿Qué es y para qué sirve la ciberseguridad?</p>
<p>Te explicamos como protegerte en internet y proteger tu información confidencial </p>
</div>
</section>
</header>
<body>
<section class="home">
<div id="general">
<h1>¿Que es la ciberseguridad?</h1>
<div class="parrafo1">
<p> La ciberseguridad es el conjunto de procedimientos y herramientas que se implementan para proteger la información que se genera y procesa a través de computadoras, servidores, dispositivos móviles, redes y sistemas electrónicos.</p>
</div>
</div>
</section>
</body>
</html>