Responsive coffee site lesson

• Use rem (root) unit for font sizes for easy scaling
• For background-image, set it to center so that center of img stays centered when resize

.banner-img {
  /* # is placeholder for img location */ 
  background-image: url('#')
  background-position: center;
}

• When reducing the img size, to keep its aspect ratio, only change width.

.fun-img {
  width: 20%;
}

• Mobile screen media query rule set max-width: 470px.

Set the img to fill the full width of the mobile

Stack img on top.

@media only screen and (max-width: 470px) {

  img {
    width: 100%;
    float: left;
    display: block;
  }

Comments

[Franco Scarpa]

To have a responsive background image that covers the window no matter how wide it is:

background: url(#) center center / cover no-repeat;