This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the full glitch code.
Below is the CSS code snippet for responsiveness using media queries:
/*** Responsive ***/
@media(max-width: 991px)
{
.wrapper{
padding: 25px;
}
.wrapper h1{
font-size: 2.5em;
font-weight: 600;
}
.content-box{
flex-direction: row;
width: 100%;
}
.card{
min-width:300px;
margin: 10px auto;
}
}