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!

Modifying Media Queries within the Media Panel

  • This lesson is the second 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 our page to clean up the navigation bar and get our web page modified for easier usage on mobile devices
  • We began to set up media queries for the page, and need to continue to add CSS rules to adjust the page based on the width of the screen
  • Here is what needs to be done to correct the issues we have going on now
    • Select main screen.css file in the Sources area and modify the following properties: (GLOBAL)
      • nav selector: Remove height and padding rules
      • li selector: Remove 40px padding
      • li selector: Turn off background color
      • Remove li tag from heading tag list in selectors (delete it from the h1,h2,h3,h4,li selector)
      • .logo: reduce line height to 1.5em-takes care of logo text pushing on nav
    • Add additional properties to the mainlinks class defined in the min-width: 701px media query
      • Color: black
      • Font-family: assign the Cambria font stack
      • Font-weight: bold
      • Line Height: 2em
      • Text-decoration: none
      • Text-transform: capitalize
  • Move into code View for styles-inner.css and locate the 701px media query
  • Move all the rules located in the min-width: 701px above all the media query rules so those properties apply no matter what screen size is viewing the page-this is how you can move them out to GLOBAL in code view

Modifying Media Queries within the Media Panel

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
  • Modifying Nav Selector 2:09
    • Padding Inner Link
    • Modify li
    • Modify Logo
    • Adjust Line Height
  • Gradients in Live View 6:07
  • Properties 7:43
    • Modifying Main Links Class
    • Multiple Main Links Selectors
  • Modifying in Code View 11:13
    • Red @Media Code
    • Defined in Global