Day 12

Media Queries!

CSS2

<link rel="stylesheet" media="print" href="print.css">

CSS3

@media only screen and (min-width: 60em) {
    ....
}

• only
• min/max-height/width
• and
• orientation
  • portrait
  • landscape

Projects

Basic main>h1>img>p website. Float the image right. Two media queries. One turns the paragraph green and turns off float on the image at 800px. The other Makes the h1 text-align: right between 500 and 600 pixels.

Also: Lighthouse media query

Fluid Images

max-width