Responsive Social Proof Section using CSS flex-box

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted almost 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component.

  body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .container {     <--- Hereafter avoid duplicating styles rules --->
  margin: 2em auto;
  }           
   
  @media (min-width: 1000px)
  .container {
  margin: 2em auto;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  00

  Marked as helpful
• 

  P

  Atif Iqbal•3,320

  @atif-dev

  Posted almost 2 years ago

  Hi, congrats on completing the challenge. Mobile first vs desktop first I also sometimes stumble with this concept. I have heard most people say to pick mobile first but actually, it depends upon the current situations/possibilities we are facing. You can read about the mobile first vs desktop first discussion here

  Hope you will find this Feedback Helpful.

  00

  Marked as helpful
• 

  Omprakash Rahangdale•900

  @OmprakashR

  Posted almost 2 years ago

  Hi, Congratulations!

  As are you using the flexbox approach, I have some inputs for this

  • in the container .container { text-align: left; margin: 2em auto; }

  you add margin:2em auto for the center container just update it into the margin:0px auto.

  • use for this also for the mobile view .lead-text add margin:0px auto. Or use can use this align-items: center; display: flex; flex-direction: column;.

  for center all components in centered for mobile approach.

  • use this code for a center entire container in the center's body{min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column;} after adding this use need to add some gap space in .reviews { flex-direction: row; margin-top: 3em; gap: 10px;

  ---

  I hope this is helpful to you.

  Thank you!!!!!

  00

  Marked as helpful