Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Media Queries for Responsive Design

  • This lesson is the final of 4 lessons that modify inner.html so it will work as a responsive design for mobile devices with smaller screen sizes
  • We will fine tune the navigation bar for mobile devices, centering the text and adding borders surrounding the hyperlinks to help differentiate them
  • We also change the media queries themselves to better accommodate the in-between sizes for devices
    • In the max-width of 450px media query on styles-inner.css
      • Add a selector of li with the following properties:
        • text-align: center
        • display: block
        • line-height: 20px
        • border-color-bottom: black
        • border-style-bottom: solid
        • border-width-bottom: thin
    • Preview in the browser
    • Delete the min-width: 650px media query
    • Change the width on our smaller screen size media query from 450px to 700px in the @media panel
    • Preview in the browsers and change the width of the browser
  • The web page is now using 2 media queries that modify the CSS rules on the page based on the screen size of the device
  • The web page shows one page layout for devices up to 700px wide, and a different page layout for screen sizes 701px or larger

Media Queries for Responsive Design

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Modify 450px Screen View 1:10
    • Add li Selector
    • Block Display
    • Adjust Line Height
    • Set Border Properties
  • Remove Media Query 5:32
  • Double-Clicking Media Query 6:54