Project-7-Social-Proof-Section using HTML CSS & using Flexbox

Community feedback

• 

  Brendan Hyde•330

  @hyde-brendan

  Posted over 3 years ago

  Hey, great start! You handled the most notable part of the design (the offset cards) well, but there's a few immediately noticeable issues I would get on:

  • There's no mobile layout; if you reduce the screen size the reviews' cards will overflow off the screen. The general idea for these sorts of things is to design the page for mobile layouts first, then add media queries to change certain CSS properties when the screen size is larger than a given value.
  • The background patterns provided in the images folder is missing from your design, as are the background color over the 5-star ratings cards.
  • To align the page's content to the middle of the screen one common method is to include the following to your main body element:

  display: grid;
  place-items: center;
  min-height: 100vh;
  

  • For the Document should have one main landmark and All page content must be contained by landmarks warnings, there's a couple of HTML elements that are treated as the "main landmark", including header, nav, main, and footer. For this particular page I would just wrap all your content in a <main> element to resolve that issue.
  • <article> elements should use a heading element to identify the content for it. You can resolve this on .reviewed by making the names of the reviewers a <h2>.

  Hope this helps!

  00