Time for action – making sure smaller screens are handled

When our layout-core.css file snaps the #container div in on smaller screens to 950 pixels, we'll want #mainNav to match that as well:

  1. In the next media query, add the following code:
    @media (max-width: 1024px) {
  /*for netbook/tablet screens*/
  #mainNav{
  position:absolute; 
  top: 110px; 
  width: 950px;}
}
  2. Save your stylesheet.

What just happened?

Our #mainNav will now snap in to the width of our #container div if the media query for 1024px or less is called. Let's see how it looks on the relevant size screen:

What just happened?

Setting up the tablet view

We're now ready to focus on our tablet and media player views. There are lots of devices out there in this range. The following two media queries help catch the majority of these devices.

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

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