Sign In
  • How-To Tutorials
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
    • Game Development
    • Computer Skills
  • Courses
    Design & Illustration
    Code
    Web Design
    Photo & Video
    Business
    Music & Audio
    3D & Motion Graphics
    Free Courses
  • Guides
    Design & Illustration
    Code
    Web Design
    Photo & Video
    Business
    Music & Audio
    3D & Motion Graphics
    Game Development
    Computer Skills
  • eBooks
    Design & Illustration
    Code
    Web Design
    Photo & Video
    Business
    Music & Audio
    3D & Motion Graphics
  • Student Pricing
  • Envato Elements
  • Envato Studio
  • Community
  • Help
envato-tuts+
  • Envato Elements
  • Envato Studio
  • Community
  • Forum
  • Help
  • Subscribe
  • Sign In
  • How-To Tutorials
    • Design & Illustration
      • Adobe Photoshop
      • Adobe Illustrator
      • Drawing
      • Adobe InDesign
      • Photo Manipulation
      • Graphic Design
      • Text Effects
      • Vector
      • Photoshop Actions
      • Icon Design
      More Categories...Learning Guides
    • Code
      • JavaScript
      • WordPress
      • Mobile Development
      • PHP
      • Laravel
      • CMS
      • Swift
      • Android SDK
      • React
      • Angular 2+
      More Categories...Learning Guides
    • Web Design
      • CSS
      • HTML & CSS
      • Animation
      • UI Design
      • Adobe Photoshop
      • Sketch
      • Workflow
      • Design Theory
      • JavaScript
      • UX
      More Categories...Learning Guides
    • Photo & Video
      • Photography
      • Video
      • Editing
      • How-To
      • Inspiration
      • Lighting
      • Adobe Photoshop
      • Adobe After Effects
      • Adobe Premiere Pro
      • Adobe Lightroom
      More Categories...Learning Guides
    • Business
      • Small Business
      • Entrepreneurship
      • Freelance
      • Careers
      • Marketing
      • Finance
      • Productivity
      • Planning
      • Communication
      • How-To
      More Categories...Learning Guides
    • Music & Audio
      • Audio Production
      • Logic Pro
      • General
      • Mixing & Mastering
      • Sound Design
      • Workshops
      • Reason
      • Recording
      • Ableton Live
      • Cubase
      More Categories...Learning Guides
    • 3D & Motion Graphics
      • Adobe After Effects
      • 3D
      • 3D Studio Max
      • Motion Graphics
      • Maya
      • Cinema 4D
      • Workflow
      • Blender
      • Visual Effects
      • Roundups
      More Categories...Learning Guides
    • Game Development
      • Game Design
      • Platform Agnostic
      • Game Mechanics
      • Business
      • Programming
      • Game Art
      • Level Design
      • From Scratch
      • Unity
      • HTML5
      More Categories...Learning Guides
    • Computer Skills
      • OS X
      • App Training
      • Productivity
      • How-To
      • Tips & Shortcuts
      • Customization
      • Automation
      • Security
      • Hardware
      • Microsoft Powerpoint
      More Categories...Learning Guides
  • Courses
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
    • Free CoursesNEW
  • Guides
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
    • Game Development
    • Computer Skills
  • eBooks
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
  • Student Pricing
  1. Web Design
  2. Responsive Web Design

Media Queries Inside Out

by Craig Campbell5 Sep 2014
Lessons:19Length:2 hours
Responsive Web DesignMedia QueriesCSSHTMLViewport
For full access to all 19 lessons, including source files, subscribe with Elements.
  • Overview
  • Transcript

5.1 Targeting Older Browsers

Like it or not, many people still use older versions of Internet Explorer, and many of the legacy browsers out there don’t support the use of media queries. In this lesson we’ll discuss a couple of approaches to overcoming this issue.

Related Links
  • Respond for Media Queries

1.Introduction
2 lessons, 06:43

Free Lesson
1.1
Introduction
01:25

Free Lesson
1.2
What are Media Queries?
05:18

2.Media Query Basics
4 lessons, 26:21

2.1
Viewport Width
04:03

2.2
Simplifying Designs for Print
10:09

2.3
HTML and CSS Media Queries
08:38

2.4
Introduction to Media Types
03:31

3.Using Widths
6 lessons, 50:04

3.1
Max-Width Media Queries
11:02

3.2
Resizing Content Based on Width
07:58

3.3
Styling the Menu
11:04

3.4
Creating a Menu Button
05:46

3.5
Making the Menu Animate
08:49

3.6
Logical Operators
05:25

4.Other Media Features
4 lessons, 21:55

4.1
Resolution Features
04:16

4.2
Orientation and Aspect Ratio
09:54

4.3
More Media Features
04:03

4.4
Animating on Breakpoints
03:42

5.Conclusion
3 lessons, 15:58

5.1
Targeting Older Browsers
07:57

5.2
The Future of Media Queries
07:18

5.3
Final Thoughts
00:43


Continue watching with Elements
Craig Campbell
Craig Campbell
Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.
craigsoup
Continue watching with Elements
×

Envato Tuts+ is now part of Envato Elements

One subscription provides unlimited access to:

1,200+ courses and ebooks
Design, code, video editing, business, and much more.
  • Adobe Photoshop, Illustrator and InDesign
  • Graphic, Logo and Print Design
  • Sketch, Adobe XD & Figma
  • WordPress
  • Javascript, PHP & Python
  • Adobe After Effects & Premiere Pro
  • Much More
Millions of creative assets
Design templates, stock videos, photos & audio, and much more.
  • Graphic Templates
  • Stock Photos
  • Music Tracks
  • Video Templates
  • Web Templates
  • Design Assets
  • Wordpress Themes & Plugins
  • Much More
From
$16.50/m
Subscribe now
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories
  • Curated Design Assets
  • Best Cool Fonts
  • InDesign Magazine Templates
  • Photoshop Actions
  • InDesign Newsletter Templates
  • InDesign Templates
  • Curated Web Design Assets
  • Responsive WordPress Themes
  • WordPress Themes for Consultants
  • Wireframe Templates
  • Best Shopify Themes
  • Masonry WordPress Themes
  • Web Themes & Templates
  • WP Themes
  • HTML Templates
  • Shopify Themes
  • Bootstrap Themes
  • Free WordPress Themes
  • Video
  • After Effects Templates
  • Apple Motion Templates
  • Video Effects
  • Lower Thirds
  • Stock Footage
  • Placeit
  • Logo Maker
  • Video Maker
  • Design Templates
  • Free Templates
  • Mockups
  • Curated Video Assets
  • After Effects Slideshow Templates
  • Premiere Pro Video Intro Templates
  • Final Cut Pro Templates
  • Final Cut Pro Title Templates
  • Premiere Pro Video Effects
  • Curated Presentation Assets
  • Keynote Pitch Deck Templates
  • Google Slides Business Templates
  • PowerPoint Pitch Deck Templates
  • Best Shopify Mobile Themes
  • Best Presentation Templates
  • Free Tools
  • Image Resizer
  • Video Cropper
  • Video To Gif Converter
  • Elements
  • WordPress Themes
  • Stock Images
  • Website Templates
  • Logos
  • Fonts
  • Tuts+
  • Learn JavaScript
  • Photoshop Tutorials
  • How to Draw
  • How to Use WordPress
  • How to Use PowerPoint
Envato Tuts+
About Envato Tuts+
Terms of Use
Advertise
Join our Community
Teach at Envato Tuts+
Translate for Envato Tuts+
Forums
Help
FAQ
Help Center
envato-tuts+
29,710
Tutorials
1,303
Courses
47,225
Translations
  • Envato.com
  • Our products
  • Careers
  • Sitemap
© 2021 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.
  • Follow Envato Tuts+
  • Facebook
  • Twitter
  • Pinterest