es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Imagen de columna y párrafo adaptativo

19 Jul, 2023 Programación

Tengo un sitio web donde quiero la imagen a la izquierda y un párrafo a la derecha. Luego, cuando la pantalla sea más pequeña, quiero la imagen en la parte superior y el párrafo en la parte inferior.

Es algo simple y ya lo he hecho antes, pero por alguna razón no está funcionando. He buscado en Google/observado otros ejemplos, pero no logro identificar el problema. ¿Puede alguien ayudarme? Estoy seguro de que es algo simple que simplemente no estoy viendo.

HTML:

<h1>Acerca</h1>
<div class="wrapper">
  <img src="image.jpg" alt="image" id="img-about">
  <p id="text-about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis asperiores in aliquid repudiandae blanditiis recusandae molestiae nemo itaque inventore velit illum vel voluptatibus, eveniet repellat facilis consectetur veritatis deleniti explicabo ducimus! Debitis numquam unde necessitatibus esse sed. Earum accusamus itaque autem reiciendis aliquam laboriosam sint rem illo explicabo culpa?</p>
</div>

CSS:

.wrapper {
  display: flex;
  flex-direction: row;
}

#img-about {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  padding: 10px;
  margin-right: 15px;
}

#text-about {
  font-size: 14px;
  margin: auto;
  padding: 5px;
}

@media (max-width: 800px) {
  .wrapper {
    flex-direction: column;
  }
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hay algunos problemas en tu código que podrían estar causando el problema que estás experimentando:

    1. En tu HTML, tienes id="img-about" para la etiqueta de tu imagen, pero en tu CSS estás apuntando a #about-img. Necesitas cambiar el selector CSS a #img-about para que coincida con el HTML.

    2. En tu CSS, estás usando max-width: 800 para tu consulta de medios. Sin embargo, necesitas especificar una unidad para el valor, como max-width: 800px.

    3. Cuando tu pantalla es más pequeña y tu diseño cambia a una columna, es posible que tu imagen termine siendo demasiado grande y se superponga al texto. Puedes agregar max-width: 100% a tu CSS de #img-about para evitar que esto ocurra.

    Aquí tienes tu HTML y CSS actualizados con las correcciones:

    HTML:

    <h1>Acerca de</h1>
<div class="wrapper">
  <img src="image.jpg" alt="imagen" id="img-about">
  <p id="text-about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis asperiores in aliquid repudiandae blanditiis recusandae molestiae nemo itaque inventore velit illum vel voluptatibus, eveniet repellat facilis consectetur veritatis deleniti explicabo ducimus! Debitis numquam unde necessitatibus esse sed. Earum accusamus itaque autem reiciendis aliquam laboriosam sint rem illo explicabo culpa?</p>
</div>

    CSS:

    .wrapper {
  display: flex;
  flex-direction: row;
}
#img-about {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  padding: 10px;
  margin-right: 15px;
  max-width: 100%; /* agregado para evitar superposiciones */
}
#text-about {
  font-size: 14px;
  margin: auto;
  padding: 5px;
}
@media (max-width: 800px) { /* unidad agregada en la consulta de medios */
  .wrapper {
    flex-direction: column;
  }
}

Comments are closed.