Responsive 3-column preview card using CSS flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  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

  Marked as helpful

  2

  ---

  

  Akanni Feyisara•110

  @Feyisara2306Posted over 2 years ago

  @correlucas I will check out the link, thank you very much!

  0
• 

  Mebo David•130

  @meistensPosted over 2 years ago

  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
  }
  

  Marked as helpful

  1

  ---

  

  Akanni Feyisara•110

  @Feyisara2306Posted over 2 years ago

  @meistens Thank you, this is very helpful!

  1