Specify How Fonts Should Degrade- What did I miss here?

HTML-CSS
1

Tell us what’s happening:
Hi, everyone. Could anyone please tell me why I can’t pass this test in Basic CSS? What I missed in the code?

Many thanks to you all!

The result is always:
“Your h2 element should use the font Lobster.”

But I do add font Lobster to h2. And I have conmmented out the link element as required to make h2 degrade to font monospace.

Your code so far


<!-- <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> -->
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/specify-how-fonts-should-degrade

2

Yep, your code passes. Copied and pasted, and passed fine. You might need to copy the code, hit the ‘Reset all code’ button, and try it again. Sounds like it’s trying to use the tests for the LAST lesson, and you’re failing because you’re commenting out Lobster.

1 Like
3

Just reset the code and paste the code again. Still not working. Don’t know why~ All other requirements are passed except for the " Your h2 element should use the font Lobster ."

I will try to do it on another laptop.

2 Likes
4

The code works in chrome on the macbook. Don’t know why it doesn’t work in firefox on ubuntu.:joy:

1 Like