# Creating a Responsive Font

**URL:** <https://forum.pinegrow.com/t/creating-a-responsive-font/2278>\
**Category:** Beginners\
**Created:** [October 6, 2018, 2:49pm UTC](https://forum.pinegrow.com/t/creating-a-responsive-font/2278 "2018-10-06T14:49:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [October 6, 2018, 2:49pm UTC](https://forum.pinegrow.com/t/creating-a-responsive-font/2278/1 "2018-10-06T14:49:30Z")

</div>

Does anyone know why this code will not work? I’m trying to make a title responsive. I’ve screen-captured my code and attached the image.

 ![31%20AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/fc3a8816f9cf647d6d4c93797b176e5f2e5614bd.png)

---

<div class="post-metadata">

**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\
**Post date:** [October 6, 2018, 8:01pm UTC](https://forum.pinegrow.com/t/creating-a-responsive-font/2278/2 "2018-10-06T20:01:08Z")

</div>

Both, the HTML and CSS are simply wrong syntax:

The HTML should be

```
<div>
    <h2>A Headline</h2>
</div>

```

… and the CSS (for above HTML) something like

```
/* The min width for Mobile first*/
@media screen and (min-width: 900px) {
  h2 {
        font-size: 2vw;
      }
}

```

… however I’m convinced, this is not a recommended approach.

Cheers

Thomas

---

<div class="post-metadata">

**Author:** ![SureWeb](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@SureWeb](https://forum.pinegrow.com/u/SureWeb)\
**Post date:** [October 6, 2018, 9:33pm UTC](https://forum.pinegrow.com/t/creating-a-responsive-font/2278/3 "2018-10-06T21:33:34Z")

</div>

Changing the max-width from 1200px to 600px should fix it 🙂

---

<div class="post-metadata">

**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\
**Post date:** [October 7, 2018, 9:05pm UTC](https://forum.pinegrow.com/t/creating-a-responsive-font/2278/4 "2018-10-07T21:05:32Z")

</div>

… sometimes, I’ve got the feeling, that using “frameworks” turning us into “Eloi”

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/58c1165264d84605f815f99d7c64f8173dfc7715.gif)

while the rest is just wondering…

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7e8446c970b6be8cecb7c023b999c4f92c5b7ec4.gif)

If I would have the choice? I’d be using a time machine.

Cheers

Thomas

---

<div class="post-metadata">

**Author:** ![SureWeb](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@SureWeb](https://forum.pinegrow.com/u/SureWeb)\
**Post date:** [October 13, 2018, 11:17pm UTC](https://forum.pinegrow.com/t/creating-a-responsive-font/2278/5 "2018-10-13T23:17:09Z")

</div>

@randyrie I didn’t notice the period in your css selector as i had originally looked at your post on my mobile.  
There are two things that are preventing your code from working

1. The media query sizes are conflicting with each other.
2. Your css is selecting for a div with a class of h2 whereas you have set an id of h2.

So going by the comments in your css and to make your code more readable and more easily edited your code should look something like this.

Html code:  
`<div> <h2>Welcome to the Nittany Leathernecks</h2> </div>`

Css code:

```
/* Base styles for h2 */
h2 {
    font-size: 2vw;
    background-color: #750308;
    padding-left: 21px;
    color: #fff;
    font-family: Amaranth;
    text-shadow: -1px 2px #000;
}

/* H2 styles for screens under 601px wide */
@media (max-width:600px) {
    h2 {
        font-size: 3vw;
    }
}
```