Responsive Social Proof page grid and flex

Community feedback

• 

  P

  Ehsan Tatasadi•1,780

  @tatasadiPosted 10 months ago

  Hey there,

  Great job on completing this challenge! It's evident that you've put a lot of effort into this project. The layout and design elements are well thought out, and the overall look of the page is quite appealing. However, I have a few suggestions that could help enhance your project even further:

  Heading Hierarchy: It's essential to maintain a proper heading hierarchy for accessibility and SEO purposes. After an h1 tag, you should ideally use h2 for the next level headings instead of jumping directly to h5 or h6. This helps screen readers and search engines understand the structure of your content better.

  Background Implementation: Rather than applying the background pattern to the entire body, consider applying it to specific elements. This approach provides more control over the positioning and scaling of the background, especially for different screen sizes. There is also a 'background-bottom' that isn't used - consider where this could be strategically applied for better visual impact.

  Use of rem Instead of em: Switching from em to rem for font sizes and spacings can offer better scalability and control. While em is relative to the font size of its direct or nearest parent, rem is always relative to the root (html) font-size. This makes rem units more predictable and easier to manage across your application.

  Max-Height of .customer: Setting max-height: 100vh on the .customer class might not be necessary. This style restricts the element's height to the viewport's height, which could be problematic for content-rich sections. Consider removing or adjusting this property based on the content's needs.

  Use of <main> Element and Content Spacing: Encapsulating your main content in a <main> element improves semantic structure and accessibility. Also, consider the layout and spacing of this content, especially on larger screens where elements might appear too spread out. Conversely, on screens that are not very tall, content might overlap in the desktop view. Adjusting the layout and spacing within the <main> element can enhance the visual appeal and readability across various screen sizes.

  Responsive Design Considerations: Lastly, it's crucial to ensure that your design is responsive and looks good on all devices. Pay special attention to how elements scale and interact at different screen sizes, and make adjustments as necessary to maintain a consistent and accessible user experience.

  Overall, you're on the right track! These suggestions aim to refine your project, making it more accessible, responsive, and visually appealing. Keep up the great work, and continue experimenting and learning with each new challenge! 🌟

  Marked as helpful

  0

  ---

  

  Skalex Stuch•210

  @mussinoPosted 10 months ago

  Wow thanks so much to take the time and reply. I will take all this check and apply to my code. @tatasadi

  0