Fotomatic project (responsive design) - how to start with media queries?

Language Help CSS
1

For this project: https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-css-documentation-and-debugging-679e7a04-ff8b-4693-a364-fa420794d1be/informationals/f1-2-c1p1-fotomatic

I’m not sure where to begin either. I was going to do this (have a div class for desktop, tablet, and mobile) and then do a media query to “display: none” the div’s I don’t want. Here’s an example of the code I wrote:

<div class="header">
    <nav class="desktop">
      <a href="index.html" class="logo">Fotomatic</a>
      <ul>
        <li><a href="#">Product detail</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="https://www.instagram.com/">Follow us</a></li>
        <li><a href="https://www.instagram.com/"><img class="icon" src="./resources/images/instagram.png"></a></li>
      </ul>
    </nav>
    <nav class="tablet">
      <a href="index.html" class="logo">Fotomatic</a>
      <ul>
        <li><a href="#">Product detail</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="https://www.instagram.com/">Follow us</a></li>
        <li><a href="https://www.instagram.com/"><img class="icon" src="./resources/images/instagram.png"></a></li>
        <li><a href="#" class="button">Join us</a></li>
      </ul>
    </nav>
    <nav class="mobile">
      <ul>
        <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
        <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
        <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
        <li><a href="#" class="button">Join us</a></li>
      </ul>
    </nav>
  </div>

/* Responsive design */ 

/* for mobile */ 

@media only screen and (max-width: 425px) {
  nav.desktop {
    display: none;
  }
  nav.tablet {
    display: none;
  }
}

/* for tablet */ 

@media only screen and (min-width: 426px) and (max-width: 767px) {
  nav.desktop {
    display: none;
  }
  nav.mobile {
    display: none;
  }
}

/* for desktop */

@media only screen and (min-width: 768px) {
  nav.tablet {
    display: none;
  }
  nav.mobile {
    display: none;
  }
}

There must be a more elegant way to go about this, but I’m not sure what it is? Any help would be much appreciated.

2

Hi @andrew_ng. Your approach is not wrong. You can create 3 separate HTML containers or only one and adapt it. For now, I suggest you the second and transform the menu list from horizontal to vertical. Here an example:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  display: flex;
}

@media screen and (max-width: 768px) {
  nav {
    flex-direction: column;
  }
3

Your approach of using media queries and setting the display property to none for the nav elements you don’t want to show is a valid one. However, you could simplify your code by using a single navigation element and adjusting its content based on the screen size.

Here’s an example of how you could modify your HTML to accomplish this:

<div class="header">
    <nav>
        <a href="index.html" class="logo">Fotomatic</a>
        <ul class="menu">
            <li><a href="#">Product detail</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="https://www.instagram.com/">Follow us</a></li>
            <li><a href="https://www.instagram.com/"><img class="icon" src="./resources/images/instagram.png"></a></li>
            <li><a href="#" class="button join-us">Join us</a></li>
        </ul>
    </nav>
</div>

Hope this helps! :slight_smile: