Issue with CSS challenge

Issue with CSS challenge
0.0 0

#1

the code seems correct but the validator returns the following errors:

Your h2 element should use the font Lobster.

Your p element should still use the font Monospace.

The preview shows the results as expected.

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

  p {
    font-size: 16px;
    font-family: Monospace;
  }
  
  h2 
  {
    font-family: Lobster;
  }
</style>

<main>
     <h2>CatPhotoApp</h2>

  <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>

#2

It seems you forgot to add Lobster font reference. Add this below line to your code it will solves your problem.

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster"/

#3

But I have. It wouldn’t show before as it wasn’t formatted as code. Sorry for the miss. The issue is despite the linking the Google font.


#4

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Can you post the title of the challenge?


#5

Thanks @kevcomedia - The challenge title is Basic CSS: Import a Google Font


#6

Strange, your code works. Maybe you should try clearing your browser’s local storage, or do this challenge in incognito or another browser.


#7

Let me try that. It didn’t work in Chrome either.


#8

Still error.


#9

Are you using the same code that you posted, or did you change it? The code that you posted worked fine here, both in Firefox and Chromium


#10

Hold on, are you sure that challenge is Import a Google Font? The tests don’t have the Use an h2 CSS selector to change to font. Are you perhaps doing it in beta?


#11

That’s correct, I am doing this in BETA. Is there an open bug against this challenge in BETA?


#12

Ok, I think I’ve recreated your problem. You code works in Chromium, but not in Firefox (same tests are red).

You should do the beta on Chrome or Chromium, as there are known bugs in Firefox.


#13

The code seems pretty straightforward to work in just about any browser. Just tested in Chrome. It works. Thanks @kevcomedia and @ababavali23