DEV Community

Cover image for Responsive coffee site lesson
Heggy Castaneda
Heggy Castaneda

Posted on

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;
  }

Top comments (1)

Collapse
 
francoscarpa profile image
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;