Basic CSS: specify how font should degrade

Hi there! I am new here and I need help with this challenge… I have done all that I think is right with the code, but I am still stuck and unable to move on to the next challenge. I’ll truly appreciate the help

    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
  h2 {
   font-family: lobster;
  } 
  h2 {
     font-family: Lobster, Monospace;
    }
    <!-- <link href="https://fonts.gooleapis.com/css? family=Lobster" rel="stylesheet" type="text/css"-->
  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>
1 Like

I have edited your post to include the challenge link.

For future challenges, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hi @chatwitsky !

Welcome to the forum!

I tested just the css part and it works for me.

It might be an issue with your browser.

Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

However, I would be able to give a full definitive answer if you sent over your full code with the html.

That way when I test it I can tell for sure if it is your browser.

Did you have any extensions? such as dark mode (or) ad blocker because this the common reason for the failing of the test and also make sure you have your browser’s zoom to 100% because your code passes for me.

Hope this Helps

Hi @jwilkins.oboe, thank you very much for the quick response and more importantly the solution proffered. However, like you said, I have Ad blocker turned on I guess that could be the reason. Nevertheless, I’ve attached the code below as requested so that you can have a look at it in case I’ve messed up the code in between…


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

<style>

  .red-text {

    color: red;

  }

  h2 {

   font-family: lobster;

  } 

  h2 {

     font-family: Lobster, Monospace;

    }

    <!-- <link href="https://fonts.gooleapis.com/css? family=Lobster" rel="stylesheet" type="text/css"-->

  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="https://freecatphotoapp.com/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>

I just wanted to make sure you didn’t edit something in the html you weren’t supposed to.

But it all checks out :grinning:

So it is your browser.

I use google chrome with no extensions and it works perfectly with the fcc challenges.

Either disable the extensions or just use a different browser.

Hi there! Yes, I have an Ad blocker turned-on on my computer. I guess that could be the problem. Thanks anyway, I appreciate your reaching out to help me on this…

Oh, ok! The browser I am using is the mozilla fire fox . So should I switch to Chrome instead… just asking for expert advice

Well, you should be able to do these challenges with an up to date firefox with no extensions.

For me personally, I have always used chrome and had no issues with the fcc editor.

But the main thing is to disable extensions when working on the challenges.

Hope that helps!

Ok, thank you. I guess I’ll just disable the Ad blocker and if it does not work then I’ll use
the chrome browser

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.