Responsive design, using Grid, Flexbox and Media Queries

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 4 years ago

  The html structure looks OK... I would advise using a class on your main element instead of styling directly - you don't want to get into the habit if styling html elements in your css, as you'll need to be able to use them in different contexts in a bigger project.

  I'm only looking on mobile atm so it's hard to tell exactly what your css is doing... It seems very long. I'm surprised to see so many breakpoints and bits of css repeated in each breakpoint.

  Usually the way we write layouts is all mobile styles (and any styles that span all breakpoints) first. Then only change what you need to as the screen size increases (inside one or two min-width media queries) Its unusual to see so many mqs and hard to understand because they are in reverse order (desktop to mobile)

  2

  ---

  

  Dan•35

  @DanEme89Posted about 4 years ago

  @grace-snow Thanks for the review i appreciate your feedback, media queries is something i definitely need to improve on!, I will add a class to main too.

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Dan! 👋

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

  I only suggest,

  • Perhaps setting a max-width on the testimonial cards so that when the page first changes into a tablet/mobile layout, the cards aren't too wide and are therefore easier to read.

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  Dan•35

  @DanEme89Posted about 4 years ago

  Hi @ApplePieGiraffe Thanks for your feedback! Yes that sounds like a good solution thanks! I will play around with this later 😎

  Happy coding to you too!

  0