Build Your Own Business Website header image

Lesson 4 – Create the Responsive CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Introduction – Mobile Devices and Responsive Behavior – Watch the Video

  • Which devices are we designing for?

    • Desktop
    • Tablet – landscape – 1024 and below
    • Tablet – Portrait – 800 and below
    • Smartphone – landscape – 500 and below
    • Smartphone – portrait- 320
  • Which Responsive Behaviors will we use?

    • What are responsive behaviors?
      • Shrink to fit
      • Floating stack
      • Disappear
      • Substitute
    • We will use
      • Shrink to fit
      • Floating stack
  • Header

    • floating stack + shrink to fit
    • The logo is a fixed min width
    • The menu stacks and shrinks
  • Content

    • shrinks to min width
  • Sidebars

    • fixed min width
    • stacks
  • Footer

    • Top row – shrink to min, stack
    • Bottom row – stack

Understanding Media Queries – Watch the Video

  • What is a media query?

    • A means of providing conditional CSS rules based on the device used to display an HTML page.
    • Examples
      • print style sheet
      • projection style sheet
      • standard Thesis
  • Terminology

    • Media Query
      • A media query consists of a media type and zero or more expressions that check for the conditions of particular media features
    • Media Type
      • screen
      • print
      • projection
      • handheld
      • speech
      • braille
      • tty
      • tv
      • all
    • Media Features
      • width/height – min & max
      • device-width/ device-height – min & max
      • orientation
      • aspect-ratio
      • device-aspect-ratio
      • others
  • Syntax – within a style sheet

    • Media type
    • Expression
      • logical operator
      • feature conditions within parens
        • feature name
        • value
    • Rules within brackets
    • Can have multiple conditions
    • Can have multiple media types

Set Up the Media Queries – Watch the Video

  • 3 sets of media queries

    • max-width 1024
    • max-width 800
    • max-width 500
  • Add device width to the queries

    • Why is this necessary?
    • max-device-width 1024
  • Add orientation to the queries

    • Why is this necessary?
  • Exclude older “user agents” with “only”

Tablet Landscape Responsive CSS Rules – Watch the Video

  • Shrink to fit/

  • Thesis widths – full width framework

    • .full_width .page
    • #content
    • #sidebars
  • Reset the Thesis widths

    • page width
    • 1 flexible column, 1 fixed width column
      • flex column gets
        • auto width
        • margin
      • fixed width column gets
        • fixed width
        • negative margin
  • Reset our custom html

    • footers
    • header

Forcing Device Width on Mobile Devices – Watch the Video

  • The Problem
  • The solution

Tablet Portrait Responsive CSS Rules – Watch the Video

  • Stack

    • reset the widths
    • float to force stack
  • Reset Thesis widths, force float

  • Reset Custom HTML

    • Make the header stack and center
    • Make the footer stack in rows of 2 columns
    • Make the bottom footer stack

Smartphone Responsive CSS Rules – Watch the Video

  • Stack
  • Font Size

Question and Answer Session- Watch the Video

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment