CSS - Tablet/Desktop View

Tablet Media Queries

Now that we have established our 'baseline' 'mobile-first' styles, it's time to override those styles under certain conditions - namely the 'device width.' We'll do this by querying(asking) our media about some of its characteristics such as it's width. We'll establish rules based on these results. Here's a simple example:

@media screen and (min-width: 768px) {
  header {
    background: red;
  }
}

Using your dev tools, try toggling your device emulator between a phone and tablet. You should see that the background-color of your header is toggling changing. Looking 👆🏾, we see that if our device is a screen (as opposed to print, etc.), and the device's screen size is more than 768px, the header has a different rule that is being applied. Make sense?

<nav>

Now, let's do something a bit more practical and hide our 🍔, whilst showing our navigation horizontally. To accomplish this, let's use a couple more 'state' classes:

• .is-hidden--tablet / Hide the 🍔. /

• .is-shown--tablet / Show the . /

👆🏾will be applied inside of a @media query.

Using responsive utility classes.

Finally, just add some flexbox to get that <nav> looking nice.

/* Media queries */
@media screen and (min-width: 768px) {
  nav ul {
    display: flex;
    justify-content: space-around;
  }

  .is-hidden--tablet {
    font-size: 0;
    height: 0;
  }

  .is-shown--tablet {
    font-size: initial;
    height: 100%; /* Take as much height as needed within the parent. */
  }
}

Note: Don't get married 💒 to 768px. We are just using that as a quick example. In a 'detail-oriented' design, you would just gauge your @medias by shrinking and expanding your screen and making decisions about when things 'look bad,' etc.

section p

One other thing that we can easily fix for our 'tablet' view is to limit how wide the our <p> tag gets in our <section>s.

section p {
    max-width: 600px;
  }

Hint: Just include 👆🏾inside that same @media we made earlier.

Desktop Media Queries

header

For a 'desktop' view, let's just choose 1024px. Again, for a 'real design,' you may want to play with screen widths and be much more particular.

We can simply change our header to use flex-direction: row;, and throw some margin-right on the figure - maybe some padding, etc.

.hero

We'll probably want to use a larger 'lorem picsum' image, and we could increase the height or .hero to 40vh, etc.

main

🙆🏾‍♂️Here's where things get interesting. We want to create our '3-column' layout for the sections inside of main. First, we'll need to use a <div> to wrap those 3 <section>s to that .hero doesn't get changed. This <div> serves as a flex 'container,' and just by applying display: flex we get most of our job done!

<main>
      <div class="hero">
        <a href="#" class="btn">Fake CTA Btn</a>
      </div>

      <div class="sections-container">
        <section>
          <h2>Some Fake Heading</h2>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis
            obcaecati, aliquam ex, hic sed autem repudiandae quas ipsum explicabo
            nemo reprehenderit, nihil iure temporibus? Distinctio odit excepturi
            corrupti at animi.
          </p>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis
            obcaecati, aliquam ex, hic sed autem repudiandae quas ipsum explicabo
            nemo reprehenderit, nihil iure temporibus? Distinctio odit excepturi
            corrupti at animi.
          </p>
          <a href="" class="btn btn--read">Read More!</a>
        </section>

        <section>
          <h2>Some Fake Heading</h2>
          <p>
            Voluptates incidunt vero aperiam ipsum vel quod ex maiores tenetur!
            Temporibus illo iusto repellendus excepturi ullam, illum quo atque
            necessitatibus odit, nulla reiciendis, labore ipsa vero ducimus
            consectetur nisi praesentium.
          </p>
          <a href="" class="btn btn--read">Read More!</a>
        </section>

        <section>
          <h2>Some Fake Heading</h2>
          <p>
            Aperiam quaerat voluptatum assumenda cupiditate distinctio,
            consequatur, omnis beatae aut repudiandae dicta pariatur atque optio
            sed ratione enim, libero nemo! Sit adipisci nisi veritatis excepturi
            aperiam eum corrupti maxime sed.
          </p>
          <a href="" class="btn btn--read">Read More!</a>
        </section>
      </div>
    </main>

I've added an extra <p> 👆🏾. This throws off the alignment of our .btn-reads. To fix that, we'll need to make our <section>s be both 'flex children' and* 'flex parents'. You can review all of the details of this implementation and the other parts of the 'desktop' view in the video below:

Desktop view for responsive design layout.