Sunnyside agency landing page solution

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi PaletteJack, great job on the whole! Just wanted to answer your question about the mobile nav menu: Instead of using a percentage width, try using min() if you want the nav to stretch to a certain width while keeping it centered, and no need to worry about setting another media query. I tried this in your code just now:

  @media screen and (max-width: 500px) {
   // remove .nav-list rule 
  }
  
  @media screen and (max-width: 768px) {
      .nav-list { 
          display: none;
          position: absolute;
          flex-direction: column;
          background-color: #FFFBF8;
          top: 5.5rem;
          height: 300px;
          width: min(100% - 3rem, 30rem);  // use this if you want a width limit (e.g., 30rem), 
          left: 0;
          right: 0;
          margin-inline: auto;
      }
  }
  
  // or you can also try width: calc(100% - 3rem) if you want it to stretch with no width limit until the next breakpoint
  

  Just to follow what @natashapl said about landmarks, I suggest changing <section id="header"> to <header> (or <header id="header"> if you like). Also, for the gallery section and the images in the features section, I suggest using responsive images with either img or picture instead of turning them into background images, which won't be picked up by a screen reader. This is an agency website, and the visual aspects are perhaps the most important feature of an agency; the images are considered part of the content and therefore should be in the HTML as good practice.

  By the way, I also completed this challenge, and if you're interested you can check out my solution for the mobile nav here: https://www.frontendmentor.io/solutions/responsive-landing-page-with-cube-css-zJrpzUIQqd

  Good luck, and once again, very well done! 😊

  Marked as helpful

  1

  ---

  

  Louie•170

  @PaletteJackPosted about 2 years ago

  @elaineleung I thought something like calc would work but i was unsure of how to implement it, that's good to know! i'll do some reading on how min() and calc() work and i'll get this added.

  Thank you for the help!

  1
• 

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  Hi PaletteJack! Nice work! I checked out your code and have a couple of suggestions:

  1. Consider wrapping "We are Creatives" in an h1 tag.
  2. It's best practice to use landmark elements like the "main" tag to let screen readers know where the main content area is. Consider wrapping all of your sections in that tag, except for the footer section.
  3. Instead of using a section tag for the footer, consider changing that to the "footer" tag

  Regarding the menu in medium and small screens, in what way did you want to position it dynamically?

  1

  ---

  

  Louie•170

  @PaletteJackPosted about 2 years ago

  @natashapl Thanks for the feedback! I was looking for a way for the width to stay dynamic but keep the positioning on mobile devices. I'll be trying out the solution that @elaineleung had suggested.

  1