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!

Adjusting Screen Sizes Using Media Queries

  • This lesson is the first of 4 lessons that modify inner.html so it will work as a responsive design for mobile devices with smaller screen sizes
  • The Dreamweaver interface can be used to show a web page at various widths to view how your web page will look at different screen sizes
  • Completely covering everything about the concept of media queries is beyond the scope of this class, but you will become familiar with how to use Dreamweaver to create and test media queries
  • The Dreamweaver interface is extremely helpful to view and set up media queries for your website using the @media panel within CSS Designer
  • We will build media queries for our web page using the @media panel in Dreamweaver so you understand how to work with the Define Media Query panel within Dreamweaver and view the results
  • The Dreamweaver Media area within CSS Designer allows you to specify which CSS rules apply at various screen sizes so you can create CSS rules that apply based on the screen size of the device viewing the page
  • When you add media queries, specific CSS rules kick in when the screen size matches the sizing set within the media query
  • You can add as many media queries as necessary and include any CSS rules within a media query to create the page layout and design you want for any screen size
  • There are many conditions you can set in your media queries, we will be looking at creating conditions based on screen size in this chapter

Adjusting Screen Sizes Using Media Queries

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
  • Main Links 1:20
    • @Media Panel
    • Define Media Query
    • Max-Width
    • Coding
    • Main Links Selector
    • Modify Font Size
    • Adding Min-Width Condition
    • Preview in Browser
    • Adjusting Min-Width
    • Modifying Padding
    • Block Display
    • Set Background Color
  • Media Query 14:09