Responsive layout mix of Grid and Flexbox

Community feedback

• 

  

  Emmilie Estabillo•5,600

  @emestabillo

  Posted about 4 years ago

  Hi BenChis, I'm not sure if I got your question, but were you looking for a way to make the mobile menu cover the entire screen? If so, I actually think you already answered your question :-) Try this on your ul:

      width: 100vw;
      height: 100vh;
      padding-top: 10%; (or whatever you prefer)
  

  My other thoughts:

  • For the header text, I would delete the span tag wrapping the word 'THAT'. Remove the margins and place the entire heading text inside the h1 and add a max-width so it would only stretch to a point.

  • The first section under the header has duplicate img tags, one used for mobile and another for desktop. Look into <img srcset> so that you are only using one tag. Here's an article

  • The social media icons need to be wrapped in an a tag since they usually lead the user to another page. There's also a huge shift when hovering on them. Use the same technique as you did on the top and footer navs with the pseudoelement ::after so that the underlines are positioned beforehand rather than adding padding to create space between them and the item hovered on.

  • The entire page might also need a max-width since it is expanding a little too much on larger screen widths.

  Hope this helps!

  11