0

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>

2
  • 2
    Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Como se ve? como se deberia ver?
    – gbianchi
    el 5 jul. 2022 a las 22:50
  • Si tienes un problema, edita la pregunta. Si buscas que te enseñen a hacer una página responsive (que se adapta a cualquier pantalla y se vea bien en ella) deberías mirar/leer un tutorial o seguir una guía. Por ejemplo este: freecodecamp.org/news/…
    – Mateo
    el 6 jul. 2022 a las 1:44

1 respuesta 1

0

Una página responsiva es básicamente (muy básicamente) un manejo de tamaño no fijo, por ejemplo

#general {
  margin: auto;
  width: 1550px;
  height: 800px;
  color: rgb(0, 0, 0);
  font-family: 'Nanum Gothic', sans-serif;
}

Tendrías que cambiar Width por máx-width 1550px y ponerle width 100% y las medias query se agregan a la parte final del archivo css (por su lectura en cascada principalmente) y se usa para casos específicos. Por ejemplo mantienes la base que puse al principio del párrafo y en la media query le pones <700px un width de 70%

@media (max-width: 700px) {
  .general {
    width: 70%;
  }
}

Tu Respuesta

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

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