2

Tengo tres tarjetas cards view que mostraré en la imagen a continuación. Mi inconveniente es que al ver la versión móvil de la página web las tarjetas aparecen alineadas de forma horizontal, al igual que en la versión de escritorio, haciendo que se compriman tanto en los dispositivos móviles hasta tal punto que no son legibles.

Así se ven en el escritorio:

introducir la descripción de la imagen aquí

Y así en la versión móvil:

introducir la descripción de la imagen aquí

Lo que podría solucionarlo es hacer que en la versión móvil cada tarjeta se coloque una detrás de la otra pero en forma vertical y no horizontal, pero esto no consigo hacerlo.

Código HTML:

<div style="display:flex;justify-content:center;box-sizing:border-box">
<div class="cards">
<div class="card card--1">
<div class="card__info-hover"><img class="card__like" src="https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/171d8d8e-2b74-4627-9d8f-a9778807dbd5.png" />
<div class="card__clock-info"><span class="card__time">09/07/2020 &bull; 20:50</span></div>
</div>

<div class="card__img">&nbsp;</div>

<div class="card__img--hover"><a class="card_link" href="#"><em style="display:none">&nbsp;</em></a></div>

<div class="card__info"><span class="card__category">Example</span> <a class="card__title" href="https://www.esims.one/mncy-corrupcion-asesinato">Example title</a> <span class="card__by">by <a class="card__author" href="#" title="author">Celeste Mills</a></span></div>
</div>

<div class="card card--2">
<div class="card__info-hover"><img class="card__like" src="https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/171d8d8e-2b74-4627-9d8f-a9778807dbd5.png" />
<div class="card__clock-info"><span class="card__time">06/07/2020 &bull; 13:42</span></div>
</div>

<div class="card__img">&nbsp;</div>

<div class="card__img--hover"><a class="card_link" href="#"><em style="display:none">&nbsp;</em></a></div>

<div class="card__info"><span class="card__category">Example</span> <a class="card__title" href="https://www.esims.one/volunteers">Example title</a> <span class="card__by">by <a class="card__author" href="#" title="author">John Doe</a></span></div>
</div>

<div class="card card--3">
<div class="card__info-hover"><img class="card__like" src="https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/171d8d8e-2b74-4627-9d8f-a9778807dbd5.png" />
<div class="card__clock-info"><span class="card__time">31/05/2020 &bull; 07:20</span></div>
</div>

<div class="card__img">&nbsp;</div>

<div class="card__img--hover"><a class="card_link" href="#"><em style="display:none">&nbsp;</em></a></div>

<div class="card__info"><span class="card__category">Example</span> <a class="card__title" href="https://www.esims.one/info">Example title</a> <span class="card__by">by <a class="card__author" href="#" title="author">Celeste Mills</a></span></div>
</div>
</div>
</div>

Código CSS:

.cards{width:100%;display:flex;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;max-width:820px}.card--1 .card__img,.card--1 .card__img--hover{background-image:url(https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/f9167dfd-9e60-4edd-b1ec-5bd151a5e52a.jpg)}.card--2 .card__img,.card--2 .card__img--hover{background-image:url(https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/21f25caa-a6fe-40bb-9b1f-85f59ee063dd.jpg)}.card--3 .card__img,.card--3 .card__img--hover{background-image:url(https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/b6f2cc1d-498a-4188-83e7-aa5f030462dc.jpg)}.card__like{width:18px}.card__time{font-size:12px;color:#AD7D52;vertical-align:middle;margin-left:5px}.card__clock-info{float:right}.card__img{visibility:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;width:100%;height:235px;border-top-left-radius:12px;border-top-right-radius:12px}.card__info-hover{position:absolute;padding:16px;width:100%;opacity:0;top:0}.card__img--hover{transition:.2s all ease-out;background-size:cover;background-position:center;background-repeat:no-repeat;width:100%;position:absolute;height:235px;border-top-left-radius:12px;border-top-right-radius:12px;top:0}.card{margin-right:25px;transition:all .4s cubic-bezier(0.175,0.885,0,1);background-color:#fff;width:33.3%;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 13px 10px -7px rgba(0,0,0,0.1)}.card:hover{box-shadow:0 30px 18px -8px rgba(0,0,0,0.1)!important;transform:scale(1.10,1.10)!important}.card__info{z-index:2;background-color:#fff;border-bottom-left-radius:12px;border-bottom-right-radius:12px;padding:16px 24px 24px}.card__category{text-transform:uppercase;font-size:13px;letter-spacing:2px;font-weight:500;color:#868686}.card__title{display:block;margin-top:5px;margin-bottom:10px;text-decoration:none!important;font-weight:700!important;font-size:22px;color:#444!important;line-height:150%}.card__by{font-size:12px;font-weight:700}.card__author{font-weight:700;text-decoration:none;color:#AD7D52}.card:hover .card__img--hover{height:100%!important;opacity:.3!important}.card:hover .card__info{background-color:transparent!important;position:relative!important}.card:hover .card__info-hover{opacity:1!important}@media screen and (max-width: 800px){.card{width:100%!important}}

2 respuestas 2

2

La primer opción para NO depender de una media query sería:

  • Al contenedor de las cards que debería tener display: flex; le podemos indicar que use: flex-wrap: wrap; de manera que cuando los elementos ya no quepan en una fila los pase a la siguiente y de esta manera no se compriman en una sola.

La segunda opción igualmente siguiendo con el uso de FlexBox pero esta vez si apoyándonos de una media query:

  • Dentro de la media query donde necesitamos que ocurra el cambio de apariencia, indicarle que rotaremos y esta vez el main axis no sea horizontal sino vertical y los elementos queden apilados uno encima del otro, con esta propiedad y valor: flex-direction: column;

Entonces para el primer caso el código sería así:

.claseElementoContenedor {
    /*
      resto de las propiedades
    */
    flex-wrap: wrap;
}

Y para el segundo caso el código sería así:

@media screen and (max-width: medidaDeterminada) {
    .claseElementoContenedor {
        flex-direction: column;
    }
}

Enlaces de interés

1

Te falta por cada tamaño de pantalla (el @media) cada uno de los .card--N con su respectivo width, claro que deberás asignarle un nombre significativo que te permita saber (permiteme decirlo así) acorde al dispositivo que tamaño tendrá; algo como el Grid System de Bootstrap.

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.