Social proof section using vanilla css

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  Hey @furhart - great job on this one! 👏 The side looks great and responds well. You seem to have everything lining up nicely. Not easy on this tricky one with those pesky stars!

  I don't have much to say on this, but something that might help you as you do more challenges is your approach for placing your component or other content in the middle of the page. I see at the moment you are using a media query and a container.

  One thing that has worked well for me is to create a three column grid on the body, and place all the direct children in the center column. With the minmax power of grid this is inherently responsive and can make things easier.

  I have been using the following code on the body of all my projects and found it to work well:

  .center-content {
    display: grid;
    grid-template-rows: min-content;
    grid-template-columns: minmax(1rem, 1fr) minmax(0, 1440px) minmax(1rem, 1fr);
  }
  .center-content > * {
    grid-column: 2;
  }
  

  You could then adjust the vertical alignment as needed just using margin on the top most element. You can also break items out of the grid when you need to on more advanced challenges, but perhaps that's for another day....

  I have found this approach super handy, and to work well on all challenges, and it saves fiddling around trying to position things at the macro-layout level. Hope this helps with the next one and keep up the great work!! 👍

  Cheers 👋

  2