Responsive (Really) Social Proof Section Flexbox

Community feedback

• 

  Nneoma Njoku•1,210

  @SatellitePeacePosted about 2 years ago

  Hello @dogukan0055 congrats on completing this project

  Your project looks great on the big screen but it is not responsive

  • To make your work responsive you have to change the direction of your cards and ratings to column because it is not possible for them to fit in a small screen as a row`

  #comments{
  display: flex;
  flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  
  
  @media (min-width:800px) {
  #comments{
  
  flex-direction: row;
  
  }
  }
  

  Also, do the same for your header section

  • Also using a mobile-first approach which I used in the example above makes it easier for you to create a responsive site

  • Lastly, your CSS is very disorganized which makes it difficult to navigate

  • Your CSS code should have an order like this

  • Google fonts

  • reset CSS

  • root

  • body/ html

  • general styles (for example you may decide that all your p will have the same color so instead of repeating the colour you can do something like this p{ color: #fff; })

  • nav

  • header-

  • main

  • section

  • footer

  • media queries

  I Hope This Helps

  0