@ozzy1136
Posted
Take a look at the reference for the @media rule and you will be able to adjust styles based on how large the viewport width is: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. So, you could write:
main {
flex-direction: column;
}
@media screen and (min-width: 650px) {
main {
flex-direction: row;
}
}
This way by default the card will be laid out vertically, but once the viewport gets too big it will place the items horizontally. Also, it is usually better to begin with the mobile design and build on top of that.