O'Reilly logo

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Fixing the design for different viewport widths

With our meta viewport problem fixed, no browsers are now zooming the page, so we can set about fixing the design for different viewports. In the CSS, we'll add a media query for devices such as tablets (for example, iPad) that have a viewport width of 768 pixels in portrait view (as the landscape viewport width is 1024 pixels, it renders the page fine when loaded in Landscape view).

@media screen and (max-width: 768px) {
  #wrapper { 
    width: 768px; 
  }
  #header,#footer,#navigation {
    width: 748px; 
  }  
}

Our media query is re-sizing the width of the wrapper, header, footer, and navigation elements if the viewport size is no larger than 768 pixels. The following screenshot shows how this looks like on our iPad: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required