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!