Responsive Grid Layout

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there, Salmane! 👋

  Good effort on this challenge! 👍

  Some suggestions from me.

  • On 576px screen width, the cards don't have enough room for the grid layout. So, I would recommend adjusting the breakpoint of the media query.
  • For the bg-pattern-quotation.svg, I recommend making it a background image. Also, it is a decorative image so I suggest leaving the alt empty if you want to keep it as an actual image element.
  • I recommend wrapping the quote with blockquote because it should be used to wrap quotations, in this case, the testimonials.

  That's it! I hope this helps. Happy coding! 😁

  Marked as helpful

  0

  ---

  

  Salmane•220

  @salmaanePosted over 2 years ago

  @vanzasetia All done . That was useful Thank you !

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @salmaane Nice work with the improvements! Now, you have adjusted the breakpoint and wrapped the quotation with blockquote. 👏

  But, I am sorry that I forgot to tell you earlier that

  • The text should still be wrapped by p tag. It's because the blockquote element’s content is a quote, not a chunks of characters. So, the end result would be,

  <blockquote>
    <p>
      testimonial here...
    </p>
  </blockquote>
  

  • After adjusting the breakpoint, I recommend having a max-width on the main element (that wraps the cards) to prevent the card from becoming too large on some screen sizes (e.g. 700px width). Also, you might want to add margin: 0 auto to the main element to make the cards horizontally center.

  Marked as helpful

  0

  

  Salmane•220

  @salmaanePosted over 2 years ago

  @vanzasetia Done! got it thank you again !

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @salmaane I took a look at the source code and I didn't notice any changes. The last commit was still "Media Queries breakpoint and Quotes wrapped with blockquotes".

  0

  

  Salmane•220

  @salmaanePosted over 2 years ago

  @vanzasetia yes I forgot to commit the changes now all is good take a look at the source code.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @salmaane Well done! 👍

  0