Responsive Testimonials Grid

Community feedback

• 

  Joanna•370

  @JoannaLapa

  Posted almost 3 years ago

  Hi LAURYNE’S,

  congratulations on completing the project! This is the best way to make the progress.

  Concerning your question - I suggest you to correct the mobile layout. Try to use Mobile First approach which is a good practice. Your solution with @media screen and (max-width: 375px) cause that all screens over 375 px (so even 376px) have desktop layout and everything is very very small. My suggestion is to prepare at first styles for mobile layout and after change the layout for bigger sizes with eg. @media screen and (max-width: 560px) etc. If you're not familiar with Mobile First approach you can read more about here.

  Other suggestions to improve your code:

  1. You don't need to repeat yourself with background-color, color and other design styles which are the same for all sizes - you can delete them from @media, because you styled them already in general code.

  2. To divide your articles (.one, .two, .three, .four) you can use gap on parent (.wrapper in your project) instead of margin (much less code). Gap works for grid and flex - you can read more here on mdn

  3. Instead of code: grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; you can simply write a shorthand: grid-area: 2 / 2 / 3 / 4 more about grid-area here

  4. I feel that making position fixed on body and position absolute on global-content is not necessary.

  5. I can recommend you a video from Kevin Povel where he made exactly this project explaining by the way many grid cases, I think that it can be useful for you. And by the way I recommend you Kevin Powel's youtube canal, there is a lot of useful css tricks. Here is the video with this project.

  I hope that my comment was helpful! Happy coding ;) Joanna

  11

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello @lauryne921, congratulations on your new solution!

  Your html is working but you can improve it using meaningful tags and replace the divs, for example the main div that takes all the content can be wrapped with <main> or section, about the cards you can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Note that <div> is only a block element without meaning, prefer to use it for small blocks of content.

  This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

  ✌️ I hope this helps you and happy coding!

  02