Creating a Responsive Font

Beginners
1

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
Screen Shot 2018-10-06 at 11.07.31 AM.png1098×732 75.7 KB

2

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

3

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

4

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

while the rest is just wondering…

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

Cheers

Thomas

5

@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;
    }
}