Missing Mobile Mode

[jordanwillis]

Visually, your page looks awesome and matches the project specification perfectly for large viewports (e.g. desktop)! However, I noticed that when I viewed the page on small mobile size screens, some of the mobile only components did not show up. For example, the nav bar is supposed to switch over to show icons instead of text.

I wasn't able to identify the exact cause of this because I do see that you have setup media queries to handle the page size differences. One thing that might help is to create two separate header structures in your HTML (one for mobile and one for desktop) and toggle their display property in your CSS.

Something like this...

<header>
  <div class="desktop">
    <div class="logo">
      <img src="resources/images/ic-logo.svg">
      <span><strong>COLMAR</strong>ACADEMY</span>
    </div>
    <nav>
      <ul>
        <li><a href="#">On campus</a></li>
        <li><a href="#">Online</a></li>
        <li><a href="#">Sign in</a></li>
      </ul>
    </nav>
  </div>
  <div class="mobile">
    <ul>
      <li><img src="resources/images/ic-logo.svg"></li>
      <li><img src="resources/images/ic-on-campus.svg"></li>
      <li><img src="resources/images/ic-online.svg"></li>
      <li><img src="resources/images/ic-login.svg"></li>
    </ul>
  </div>
</header>

header .mobile {
  display: none;
}

@media only screen and (max-width: 550px) {
  header .desktop {
    display: none;
  }

  header .mobile {
    display: block;
    width: 100%;
  }

  header .mobile ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .logo {
    justify-content: center;
  }

  .logo span {
    display: none;
  }

  nav {
    display: none;
  }
}

This way its a bit clearing creating the selectors for each header structure to show/hide.

[ThomasRipplinger]

huh, this one is strange. I did all my testing in Chrome by making the browser window smaller and it worked fine. However when if select a different screen size via the Chrome toolbar the mode does not switch. Will find out...

[ThomasRipplinger]

This problem may be related to the way Chrome is emulating device modes (did you test my sites' mobile mode with Chrome emulation?), this extra line fixes the issue: <meta name="viewport" content="width=device-width">" (found here) In Firefox it works fine without. Updated version in Github.

In any case the tip with the 2 different header structures is great.