0

En un contenedor principal tengo dos div, en el cuál trato que ambos elementos sean adaptables a la pantalla. Hasta ahora solo el último div se adapta, pero el primero no lo hace.

He intentado ponerle flex al contenedor principal, para que los div hijos se puedan adaptar, pero hasta ahora obtengo el mismo resultado.

Gracias de antemano.

Acá dejo mi código:

* {
    margin: 0;
    padding: 0;
}

#principal {
    background: skyblue;
    /*display: flex;
    flex-direction: column;*/
}

#principal #contenedor-1 .column ul {
    list-style: none;
}

#principal #contenedor-1 {
    border: 1px solid navy;
    width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

#principal #contenedor-2 {
    background: skyblue;
    display: flex;
    justify-content: center;
}

#principal #contenedor-2 div {
    border: 2px solid navy;
    width: 800px;
}
<div id="principal">
    <div id="contenedor-1">
        <div class="column">
            <span>Título 1</span>
            <ul>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 2</span>
            <ul>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 3</span>
            <ul>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
            </ul>
        </div>
    </div>
    <div id="contenedor-2">
        <div>
            <p>Texto Texto Texto Texto Texto Texto Texto</p>
        </div>
    </div>
</div>

3
  • Cambia el width de 800px por max-width 800px o por flex: 0 0 [Algún valor en %]. Las columnas en pantallas pequeñas se pegan unas a otras yo le pondría un width a las columnas con media query Commented el 31 ago. 2021 a las 11:52
  • 1
    solo cambia el tamaño fijo por un max-width: 800px; te recomiendo que uses bootstrap en estos casos para hacer estas cosas mas rápido y también tener todo mas optimizado, te dejo este enlace si te interesa aplicarlo, saludos y suerte!
    – Roy
    Commented el 31 ago. 2021 a las 13:34
  • Muchas gracias, me sirvió perfecto. Pero me entró la duda del por qué el max-width se adapta al ancho cuándo se reduce la pantalla, ya que no se supone que el max-width solo sirve para indicar el tamaño máximo del elemento?.
    – EDG_DGK
    Commented el 1 sept. 2021 a las 5:31

2 respuestas 2

0

Añade esto a tu css

#principal #contenedor-1 ,
#principal #contenedor-2 {
  max-width: 100%;
}

* {
    margin: 0;
    padding: 0;
}

#principal {
    background: skyblue;
    /*display: flex;
    flex-direction: column;*/
}

#principal #contenedor-1 .column ul {
    list-style: none;
}

#principal #contenedor-1 {
    border: 1px solid navy;
    width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

#principal #contenedor-2 {
    background: skyblue;
    display: flex;
    justify-content: center;
}

#principal #contenedor-2 div {
    border: 2px solid navy;
    width: 800px;
}

/* Añadido a tu código */
#principal #contenedor-1 ,
#principal #contenedor-2 {
  max-width: 100%;
}
<div id="principal">
    <div id="contenedor-1">
        <div class="column">
            <span>Título 1</span>
            <ul>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 2</span>
            <ul>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 3</span>
            <ul>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
            </ul>
        </div>
    </div>
    <div id="contenedor-2">
        <div>
            <p>Texto Texto Texto Texto Texto Texto Texto</p>
        </div>
    </div>
</div>

1
  • Debes explicar qué hace el código y cómo resuelve el problema. Las publicaciones que son básicamente código sin una descripción apropiada se consideran de baja calidad. Por favor, añade más detalles para extender tu respuesta. Lee Cómo responder para más información.
    – Alvaro Montoro
    Commented el 3 sept. 2021 a las 12:57
0

espero te sea de utilidad el siguiente codigo:

* {
    margin: 0;
    padding: 0;
}
#contenedor-1{
  display: flex;
  flex-wrap: wrap;
}

.column{
  background: skyblue;
  padding: 10px;
  margin-left: 10px;
  width: 300px;
  text-align: center;
}

#principal #contenedor-1 .column ul {
    list-style: none;
}

#principal #contenedor-1 {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

#principal #contenedor-2 {
    background: skyblue;
    display: flex;
    justify-content: center;
}

#principal #contenedor-2 div {
    border: 2px solid navy;
    width: 50%;
}

#contenedor-2{
  margin-top: 20px;
}

#contenedor-2 div p{
  text-align:center;
}
<div id="principal">
    <div id="contenedor-1">
        <div class="column">
            <span>Título 1</span>
            <ul>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 2</span>
            <ul>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 3</span>
            <ul>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
            </ul>
        </div>
    </div>
    <div id="contenedor-2">
        <div>
            <p>Texto Texto Texto Texto Texto Texto Texto</p>
        </div>
    </div>
</div>

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.