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:
Y así en la versión móvil:
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 • 20:50</span></div>
</div>
<div class="card__img"> </div>
<div class="card__img--hover"><a class="card_link" href="#"><em style="display:none"> </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 • 13:42</span></div>
</div>
<div class="card__img"> </div>
<div class="card__img--hover"><a class="card_link" href="#"><em style="display:none"> </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 • 07:20</span></div>
</div>
<div class="card__img"> </div>
<div class="card__img--hover"><a class="card_link" href="#"><em style="display:none"> </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}}