Yellow Jacket
Blue Ridge High School
Yellow Jacket
Home > Web Design > Web II > Responsive Website



  1. Read over the following tutorial, which I think is short and to the point: Responsive Web Design. Clink of each of the topics at the bottom of the page.
  2. Take a look at an example I put together that shows how you can make sections of your page disappear using "display: none;" CSS property.
  3. You should have already created a desktop and mobile storyboard in the first assigment.
  4. You can decide whether to use more than one CSS page.
    • If your desktop and media layouts are extremely different it may be best to use two.
    • You can use one stylesheet and insert the following to modify certain aspects of your page: @media (max-width: 600px) {CSS}.
    • Check all spelling and grammar.
    • Validate your pages.
  • Be sure to include <meta name="viewport" content="width=device-width, initial-scale=1"> to ensure that the text size adjusts correctly for smaller screen devices.