Images on Small Screens

A CSS design must take mobile devices into consideration, since every one has a mobile device.

To make things simple, only two screen sizes are considered here. One’s screen width is larger than 768px (minimum width of tablets), and the other screen width is less than 768px (for screens smaller than tablets). Please refer to this for more information.

The requirements are identical to those in the previous article, and are not listed here.

I move the CSS code mentioned in the previous article to a media query section.

@media (min-width: 768px) {
  div {
    max-width: 1080px;
    min-width: 960px;
    margin: 0 auto;
  }
  div img {
    width: 100%;
    height: auto; // for readability
  }
}

The CSS code for small screens is:

div {
  width: 100%;
}
div img {
  width: 100%;
  height: auto;
}

The only difference with respect to the above CSS code is the width of the <div> element. On small devices, the <div> takes the full width of the screen.

However, the CSS code for images inside the <div> element appears twice. So the redundant code should be erased. Full code is listed below. Cascading rule for <div> element applies here.

div {
  width: 100%;
}
div img {
  width: 100%;
  height: auto; // for readability
}
@media (min-width: 768px) {
  div {
    max-width: 1080px;
    min-width: 960px;
    margin: 0 auto;
  }
}

Complete. Simple enough.