Four-card-feature section with grids

Community feedback

• 

  Darkstar•1,310

  @DarkstarXDD

  Posted 2 months ago

  I don't see many issues and it's a nice solution. Here are couple of suggestion.

  • header is usually for content that repeats across multiple pages on a site. Usually it's positioned at the very top of a page and contains the the company/brand logo and the navbar. The content you have put inside the header is specific to this page. So i wouldn't use a header here. Also a h1 being inside the header doesn't sound right either. I would include the h1 and that p in the main and remove the header.
  • You can definitely utilize the extra space in mid size screens. Use your browser dev tools and change the screen size and see. There is lot of unused space from around 500px to 1400px screen sizes. You are switching to the desktop layout very late. You can switch to the desktop layout much more earlier. When i did this challenge i added a tablet layout as well. On mobile screens it can be a 1 column grid. Then on mid size screens it can be a 2 x 2 grid. Then on desktop layout it can be the layout that you currently have. It's just an idea, it's up to you to do something with the extra space that's currently there.
  • The padding-top you are using on the section called four-card-feature should actually be a margin. Generally padding is used to get the spacing between an element's edges and it's content. margin and gap is what you use to get the spacing between two sibling element. What you have done is not wrong, but i think it's a good mental model to have and follow.

  00