Responsive social section with flex

Community feedback

• 

  P

  Katrien Schuermans•1,210

  @katrien-sPosted about 4 years ago

  Hi Tiass, You actually have a neat-looking design there. Though I do indeed see in your css you've gone a bit overboard with the media-queries.

  • Start working mobile-first. And think about your breakpoints. FreeCodeCamp wrote an article on that.
  • Set a max-width on your body. At some point you want the content to stop growing and be in its place. Enlarge your screen in your dev tools and see what happens when it gets really really big.
  • To make your page more responsive; try to set your margins & paddings in (r)em, your font-size in rem and your widths in %. Pixels are strict values, they don't change.
  • Instead of adjusting the margins on bottom-boxesand hero-ratings I was tipped to use transform: translate().

  But your code reads lovely. It's well-organized. Nice one. Happy coding!

  2

  ---

  

  Tiass•295

  @TiasstiassPosted about 4 years ago

  @graficdoctor Thanks for the feedback, will definitely look more into that.

  0
• 

  Luke•220

  @lukebergmannPosted about 4 years ago

  Wow, this is pretty perfect! Incredible job!

  0

  ---

  

  Tiass•295

  @TiasstiassPosted almost 4 years ago

  @lukebergmann Thanks :)

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Tiass! 👋

  Nice job on this challenge! Your solution looks pretty good and is responsive! 👍

  Like graficdoctor mentioned, setting a max-width on the content of the page would be a good idea, and I think adding some margin or padding between the heading + paragraph text and the review boxes in the desktop layout would be nice to prevent the two from coming so close together when the width of the screen decreases.

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  Tiass•295

  @TiasstiassPosted about 4 years ago

  @ApplePieGiraffe Good to know, thanks :)

  0