Responsive 3-column preview card using CSS flexbox

Hey Akanni, how are you? Congratulations for your solution!

Answering your question, you can make your code responsive using media queries, you can set breakpoints for the page, for example when you page reach the width of 700px you can set that the flex column instead of vertical become horizontally. You just need to set a media query like I'll write in the following example:

Example:

@media (max-width: 800px) {.container { flex-direction: column; } }

You can try that and say me if works to make the cards get the vertical direction after the width of 700 pixels.

Here you can understand how media queries work:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Recheck your css code, seeing some errors

@media screen and (max-width: 375px){ 
   .container{ 
     display: flex; 
     flex-direction: column; 
     width: 90%; 
     padding: 1em; 
   }

Above should be min-width: 375px, not max-width, I'm getting a desktop design on my device plus I feel your question would be answered if you added a breakpoint like this

@media screen and (min-width: 375px) and (max-width: 767px){
...styles
}