3 Column preview card component using Flexbox

Community feedback

• 

  Андрій Рогов•1,155

  @Andrii-RohovPosted over 3 years ago

  Hi there, its a great solution. one improvement, maybe try to set max-width to your container div

  Marked as helpful

  0

  ---

  

  Mayura Rane•20

  @MayuraRanePosted over 3 years ago

  @Andrii-Rohov will do. Thank you!

  0
• 

  Aman Patil•885

  @Amanpatil-DevPosted over 3 years ago

  Hello Mayura👋, Your solution responds well and Everything looks good to me 👍

  One advice I have is when making any design first what I do personally is scale down the browser width to 425px and design according to mobile first and then scale up for like 768px then 992px then 1200px what this do is make the design more mobile friendly scaling up would be easy because u just have to write media queries for scaling up

  For Example if you see your each card gets Skinner when you go to screen-width 801px till 1022px

  so your can write

  @media (min-width:801px){ .flex-container{ width:100% } }

  -Explanation:-we say that when you will go to Screen-width of 801px and greater than 801px apply width of 100% to class .flex-container

  then after scaling up to screen width of 1022px you can say

  @media (min-width:1022px){ .flex-container{ width:72% } }

  -Explanation:-Here we say that when you will go to Screen-width of 1022px and greater than 1022px apply width of 72% to class .flex-container

  Hope this helps✌️

  Happy coding😃

  0