Time for action – checking in on larger desktops

We've styled our standard, default view, but we'll also want to handle larger desktop browsers. Let's add some CSS to our first media query, to widen the #mainNav nav element out to match our #container div if we detect a larger screen:

  1. Inside your first media query, add the following code:
    @media (min-width: 1220px) {
   #mainNav{
    position:absolute;
    top: 110px;
    width: 1100px;
  }
}
  2. Save your stylesheet.

What just happened?

Our layout-core.css stylesheet sets our div widths as percentages, so they'll expand to whatever size the #container div is set to. It also sets the #container div to 1100 pixels. Our #mainNav nav will now match and not extend over the #container div on larger screens.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset