Responsive Webpage using CSS Grid & Flexbox

Community feedback

• 

  P

  Christopher Adolphe•620

  @christopher-adolphe

  Posted about 3 years ago

  Hi @tiffanicodes, 👋

  You did a nice job in completing this challenge. 👍 I have recently completed the same project and I think I can give you some tips on how you could improve your solution or at least think of a different approach.

  • I see that you have built the main content section using the grid-area property from CSS grid. While this is not a bad approach, it is not a flexible solution. Here are 2 resources that will surely help you come up with a more efficient layout. Travis Horn - Responsive grid, CSS-TRICKS - Responsive Grid
  • In order to render the hero title in black and white, you can apply the mix-blend-mode property. It can have different values depending on the result you want to get, in the case of this challenge, the exclusion value does the job. 😉 Read more about it here.
  • The spacings in the footer section need to be reviewed as at the moment it looks wider than the header and main sections. I would suggest that you add a wrapping <div class="container"> element inside the different sections of your page to which you then apply a max-width. This will resolve the problem as well as on the location page.
  • On the CSS side, I would suggest that you refrain from using id as selectors to style elements as this hinders reusability.

  I hope this helps.

  Keep it up.

  12

  Marked as helpful
• 

  Faruk Abdulganiyu•380

  @faruking

  Posted about 3 years ago

  Well done. I had the same struggle also. You can also check my solution, you might find something helpful especially in the area of responsiveness.

  11