Mobile first solution using flexbox.

Community feedback

• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  Hi Carlos, good job at using flexbox to complete this challenge.

  I do agree with you that the div structure can be improved. I would recommend using css grid to build this layout as it's made for building complex/tricky layouts. There's two methods with css grid (with column/row names or numbers). Try the template area names.

  Also take a look at HTML semantics when building your tags. I'll leave this here in case html semantics here. I would suggest using <main> tag for your div.main-container and <section> for your div.review-card

  Great start and keep on coding!! 👍👍

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Carlos T! 👋

  Good work on this challenge! Your solution looks pretty good and is responsive! 👍

  I suggest,

  • Setting a max-width on the main container or wrapper in your solution so that the content of the page doesn't look too stretched on large screens.
  • If you are to immediately break into a mobile-friendly layout at 1440px, set a max-width on the testimonial cards, too, and center them in the viewport so that they aren't too wide (and the text inside them is more readable) when the layout changes.
  • Using <article> tags for the testimonial cards instead of regular <div>s might make your HTML a little more semantic!

  Keep coding (and happy coding, too)! 😁

  0