Basic CSS - Size Your Images

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I think I’m stuck 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;
  }
   <img class="fixed-image" src="http://www.example.com/picture"/>
  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>
  <style>
  .smaller-image {
    width: 100px;
  }
  </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/107.0.0.0 Safari/537.36

Challenge: Basic CSS - Size Your Images

Link to the challenge:

2

HI @Albert4 !

It looks like you have some syntax errors.

You added this img tag in the middle of your css

You also have two style sections when there should only be one.

I would suggest reseting the lesson.

After you reset the lesson, do not create any new style tags.
Add these img styles

inside the exisiting style tags here

<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

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

Then inside the img element here

add your class attribute

Hope that helps!

3

Okay lemme try that I do hope it helps

4

Still doesn’t work for me I don’t know why

5

Please share your whole code because there were a few issues with the original that you posted.

I will be able to see the problem when you post the entire code :+1:

6

smaller-image {
width: 100px;
}

7

Tell us what’s happening:
Describe your issue in detail here.
I think here the problem is
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;
  }
    smaller-image {
     width: 100px;
    }
</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/107.0.0.0 Safari/537.36

Challenge: Basic CSS - Size Your Images

Link to the challenge:

8

Please do not create duplicate topics for the same challenge/project question(s). This duplicate topic has been unlisted.

Thank you.

9

I moved your duplicate post over here so I can see the full code

10

I spot two issues here

No.1:
You are missing the dot in front of smaller-image

Remember that class in css start with a .

No.2:
You need to add the class attribute here for the img element

If you need help on the syntax then look at the class attribute you added here for the h2

11

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