13.ResponsiveDesign-HuffPostClone

Responsive Design

Objectives

• Introduce Responsive Design

• Different Images Depending on Browser Width

• Media Queries

Table of contents

• Responsive Design

• Different Images for Different Browser Widths

• Media Queries

• Mobile To Desktop

Responsive Design

• Responsive Design is about creating web pages that look good on all devices.

• So far we have designed our site for mobile first and now we must expand it to look good on a tablet view and a desktop.

Different Images for Different Browser Widths

• Large images are unnecessary for small screens and also increase loading times.

• Conversely small images for used for mobiles start to look grainy when viewed on a desktop.

• This is called the resolution switching problem.

• We will see how we can deal with this issue a little later.

Media Queries

• Media queries when used for responsive design are often used to enforce different sets of CSS rules based on different widths of the screens being used to view the content.

• As mentioned before with progressive enhancement, the mobile first design is expanded to larger layouts where there becomes too much space at which point, layout, size and extra content is added.

Mobile To Desktop

Desktop Logo

@media (min-width: 1024px) {
  .nav__logo {
    width: 168px;
    max-height: 32px;
  }
}

Top Story Section

@media (min-width: 1024px) {
  .top-story {
    width: calc(100% - 64px);
    max-width: 1120px;
  }
}

Top Story Headline Text

@media screen and (min-width: 1280px) {
  .top-story-promo__headline h1 {
    font-size: 90px;
  }
}

Different Images for Different Widths

.top-story-promo__image--small {
  width: 100%;
  height: auto;
}

.top-story-promo__image--big {
  display: none;
}

@media (min-width: 1024px) {
  .top-story-promo__image--small {
    display: none;
  }
}

@media (min-width: 1024px) {
  .top-story-promo__image--big {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
  }
}

Featured Section

@media (min-width: 1024px) {
  .featured {
   max-width: 1012px;
   border-bottom: 1px solid #e0e0e0;
   padding-bottom: 32px;

  }
}

Featured Articles

@media (min-width: 1024px) {
  .featured__articles {
    display: flex;
    flex-wrap: wrap;
    padding: 32px 0 0 32px;
    margin: -32px;
    overflow: hidden;
  }
}

Featured Article

''' @media (min-width: 1024px) { .featured .article { margin: 0; padding: 0 32px 32px 0; box-sizing: border-box; background-clip: padding-box; width: 33.33333%; border: none; flex-direction: column; } } '''

Featured Article Image

@media (min-width: 768px) {
  .featured .article__image {
    width: 184px;
    margin-right: 16px;
  }
}

@media (min-width: 1024px) {
  .featured .article__image {
    width: 100%;
    margin-bottom: 13px;
  }
}

Featured Article Text

@media (min-width: 768px) {
  .article__text {
    width: auto;
  }
}

Featured Article Headline

@media (min-width: 768px) {
  .article__text__headline h3 {
    font-size: 1.5rem;
    max-width: 412px;
  }
}

@media (min-width: 1024px) {
  .article__text__headline h3 {
    font-size: 1.25rem;
    max-width: 224px;
    line-height: 1.4rem;
  }
}