Im having problems with this exercise, when i go to degrade the Lobster text with monospace the monospace stays black and wont register..what am i doing wrong?

Tell us what’s happening:
Describe your issue in detail here.

  **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;           
}
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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36 Edg/96.0.1054.53

Challenge: Specify How Fonts Should Degrade

Link to the challenge:

I think you were expected to give h2 a fallback font .

When I did the monospace; just remained black and wouldn’t load right

@William8 You has commented out the link to google font. And the challenge has asked you to apply the monospace font to the h2 element so that it now has two fonts - Lobster and monospace .
You must read the given information carefully and thoroughly.

I did that yet still doesn’t work

@William8 Did you delete the word Lobster?

when you make changes please repost your new code.

I have posted another help request with my current code on it.

.red-text { color: red; } h2{ font-family: Lobster; monospace; }

I just posted my new code and it still doesn’t work

@William8 Then just reset your code and write the ask code carefully.

@William8 And share your code. We are unable to help you out without seeing your new code.

When i go to degrade the Lobster; to monospace; it doesnt work. What am i doing wrong?
Describe your issue in detail here.

  **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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36 Edg/96.0.1054.53

Challenge: Specify How Fonts Should Degrade

Link to the challenge:

You have a small syntax error. Have a look at the sample code again:

p {
  font-family: Helvetica, sans-serif;
}

Thank you so very much! i cant believe i missed something so small

@William8 put,comma between lobster and monospace.

1 Like

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