# 13.ResponsiveDesign-HuffPostClone

![BNTA logo](https://1379693580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkfXqDBq1iiX4hTG-Q2-2910905616%2Fuploads%2Fgit-blob-0f350f7b6caaf284e1b8b32fc150d4f25e71e0df%2FBNTA_simple.png?alt=media)

## Responsive Design

### Objectives

* Introduce Responsive Design
* Different Images Depending on Browser Width
* Media Queries

### Table of contents

* [Responsive Design](#responsive-design)
* [Different Images for Different Browser Widths](#different-images-different-browser-widths)
* [Media Queries](#media-queries)
* [Mobile To Desktop](#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;
  }
}
```
