0

Soy novato todavía en desarrollo web en CSS. Ahora mismo estoy trabajando en mi portfolio —que le queda poco— y he aprendido a hacer un diseño en columnas que, hasta ahora, no me daba fallos.

Utilizo tres hojas de estilos (small, medium y large) para hacerlo responsive y mobile first. Luego, tengo una hoja con estilo globales en la que, entre otras cosas, tengo definidas las clases de row y column:

El problema lo tengo en el siguiente código HTML:

  .row{
    clear: both;
    }
    
    .column{
        float: left;
    }
    
    .clear-fix:after{ 
        content: "";
        display: table;
        clear: both;
    }
    
    .limited{
        max-width: 1000px;
        margin: auto;
    }
<div class="services-area row clear-fix limited">
           <section class="column small-12">
               <h1 class="text-uppercase title-text">Servicios que ofrezco</h1>
           </section>
           <section class="column small-12 medium-6 large-3">
               <img src="/img/servicios/118-macbook.svg" alt="img-servicios1">
               <h5 class="card-title text-uppercase">Corrección</h5>
               <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, obcaecati.</p>
           </section>
           <section class="column small-12 medium-6 large-3">
               <img src="/img/servicios/day69-dotted-notebook.svg" alt="img-servicios1">
               <h5 class="card-title text-uppercase">Informes de lectura</h5>
               <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, obcaecati.</p>
           </section>
           <section class="column small-12 medium-6 large-3">
               <img src="/img/servicios/day73-writing-tool (1).svg" alt="img-servicios1">
               <h5 class="card-title text-uppercase">Redacción</h5>
               <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, obcaecati.</p>
           </section>
           <section class="column small-12 medium-6 large-3">
               <img src="/img/servicios//day93-programing.svg" alt="img-servicios1">
               <h5 class="card-title text-uppercase">Desarrollo web</h5>
               <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, obcaecati.</p>
            </section>
     </div>

En la práctica, en móvil muestra las columnas de una a una hacia abajo. En pantallas medianas, lo hace de dos en dos columnas. Y ya en pantallas grandes, deja la cuatro columnas en una misma fila horizontal. El problema lo tengo en la visualización de pantallas medianas. El primer par de columna funciona bien, pero el segundo desborda y envía la columna izquierda hacia abajo. El caso es que el inspector me indica que cada columna ocupan justo la mitad del espacio, por lo que no debería desbordar.

En los media-query, tengo indicado que small-12 tenga width: 100%;, medium-6 width: 50%; y large-3 width: 25%. Y, hasta donde me indica el inspector de contenido, se está cumpliendo.

¿Alguien me echa un mano? Si necesitáis algún detalle más, no dudéis en preguntar.

¡Muchas gracias!

1 respuesta 1

0

Vale. Por fin he conseguido arreglar el problema.

No entiendo todavía el error, porque el curso en el que lo aprendí estaba muy bien y al tío no le daba error.

En todo caso, por si a alguien le interesa, el modelo de clases para columnas que he usado es muy sencillo y funciona, va perfecto. El cambio que he hecho ha sido añadir a la clase .row un toque de flexbox, quedando así:

.row{
    display: flex;
    flex-wrap: wrap;
    clear: both;
}

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.