Udacity - Responsive Web Design Fundamentals notes.md

##Handle width and max-width To oblige elements to fit parent container, put max-width:100%

img, embed, object, video {
  max-width:100%;
}

max-width overrides width and forces an element to fix a container

<img id="owl">
#owl {
  width:640px;
  max-width:100%;
}

##Fonts

• 65 characters per line for the web
• 16px and 1.2em for a good start (14px too small)
• even increase to 18px and 1.25em for sections with lots of text

##Images: Relative width and calc

Align 3 images to fit the entire width with 10px margin in between them Exercise page

  body {
    margin: 0;
  }
  img {
    float: left;
    margin-right:10px;
    width: calc((90% - 20px) / 3)
  }
  img:last-of-type{
    margin-right:0;
  }