HTML and CSS(flexbox & grid)

Community feedback

• 

  CyrusKabir•1,885

  @CyrusKabirPosted almost 3 years ago

  hello my dear friend ♥ you did good at all and beside what another friend said , there is one thing and more visible thing :

  • try to change the background color in this case and keep it close as possible to main design and style guide file

  Marked as helpful

  1
• 

  T

  Alex•2,010

  @AlexKMarshallPosted almost 3 years ago

  Your main container gets very wide on a large screen. This is because you have set width to be 88%. Avoid setting the width property. Instead set a max-width and some padding to make sure it doesn't hit the sides when smaller than that. Also the element should probably be a <main> as you don't have one anywhere.

  Remove the height from the grid container too. That's causing overlap at certain screen-widths. In general you don't want to use height for anything. Instead you can control the how big the rows get by using grid-template-rows which allows more flexibility.

  Looks like you've got some issue with fonts. The Verified Graduate text is showing up in a default serif font. It looks as though that's because you're setting font-family on individual classes. As the font-family should be the same for everything on the site, it would be better to do that on the body instead, so it's inherited everywhere. You could do it as part of your CSS reset.

  The layout on mobile is missing the gaps between the different quotes. You can add that with the gap property on the grid container.

  0