Responsive Website using CSS only

App.css

/* Responsive Images */

img {
  max-width: 100%;
}

/* Tablet Landscape */

@media screen and (max-width: 1060px) {
  #primary {
    width: 67%;
  }

  #secondary {
    width: 30%;
    margin-left: 3%;
  }
}

/* Tabled Portrait */

@media screen and (max-width: 768px) {
  #primary {
    width: 100%;
  }

  #secondary {
    width: 100%;
    margin: 0;
    border: none;
  }

  @media (min-device-width: 600px) {
    img[data-src-600px] {
      content: attr(data-src-600px, url);
    }
  }

  @media (min-device-width: 800px) {
    img[data-src-800px] {
      content: attr(data-src-800px, url);
    }
  }
}

/* Typography */

@media (min-width: 640px) {
  body {
    font-size: 1rem;
  }
}

@media (min-width: 960px) {
  body {
    font-size: 1.2rem;
  }
}

@media (min-width: 1100px) {
  body {
    font-size: 1.5rem;
  }
}