Responsive 3 Column Layout with Flexbox

Community feedback

• 

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  Hey Ben You did amazing work congratulations for completing this challenge

  -- To make your code more Responsive

  ------------------------------------------------------------------ Tip ---------------------------------------------------------------------

  • use media query for mobile and Ipad but in this challenge you will use for mobile only with min-width:375px or smaller and max-width:775px.so instead of use this

  @media(max-width: 1440px)
  {
    .all-cols
   {
       flex-direction: column; 
       height: 90%; 
      margin: 50px 0;
      width: 100%;
      }
  }
  

  you need to make responsive in mobile to Keep nice view so we don't need cards with column direction in IPad or PC but we need it in mobile or iPad only so use this instead

  @media(max-width: 775px)
    .all-cols {
       flex-direction: column; 
       margin: 50px 0;
       min-height:90%;
       max-width: 100%;
     }
  

  • It's recommendable to use min-height instead use height only so if text or elements viewed in smaller screens don't damage the view

  • don't use large number of margin , and Use rem unit or percentage(%) instead pixel to keep content fit container

  • use min-width or max-width depend on what your application need instead use width only

  -you can use variables in css and save colors or fixed sizes in variables like this :

  :root 
  {
  --main-color:#3829e0;
  --font-family:'Red Hat Display',sans-serif;
  }
  
  h1 
  {
  font-family:var(--font-family)/*to call  value of the variable*/
  }
  

  You used semantic class names as Bootstrap so code is readable and this awesome

  Regardless You did amazing I hope this is useful to you... Keep coding👍

  Marked as helpful

  2

  ---

  

  Ben•40

  @bws3028Posted over 2 years ago

  @zenab12 Thank you so much for your feedback! I really appreciate the time you spent looking at my work!

  1

  

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  @bws3028 You are welcome Ben 😊

  0
• 

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  I have done some some correction and EXPLANATION to someone's code you can check it, it will help...

  github repository link

  live link

  if you notice anything wrong, feel free to contibrute/correct me I am not perfect, I am a beginner, I am open to correction and suggestions and I wiling to learn more I'm doing this because I hope it will help

  feel free to ask questions, if there is anything you don't understand

  I Hope you find this helpful...

  0