Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide. (Lesson question)

Tell us what’s happening:
Describe your issue in detail here.
its telling me to create a class called smaller-image which I’ve done in the href link and I’ve also created the code to make the image 100px. please help

  **Your code so far**
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" class='smaller-image'>
<style>
  .red-text {
    color: red;
  }
.smaller-image {
  width: 100px;
}
  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>

i don’t see why the link is at the top ,but anyway , you should creat the class in the img tag instead of the link

The link at the top, is how you are able to use the font family “lobster”. (it’s source) Import a Google Font .

As for classes, think of them as a way to communicate between HTML and CSS, which means you give an HTML tag a class name, and then you go to specify how you want that div to be styled in the CSS using that class name.

In this challenge, you should add the code in the CSS and assign the class name “smaller-image” to the HTML element you want to style, which is the image.

Good luck.

idk it was there by default, where is it meant to be

try adding class=“small-image” inside the img tag. That worked in my safari.

Yes I did this but I found my issue I needed to assign it to the image link

should i put like this

<style>
  .smaller-image {
    width: 100px;
  }
</style>

but still not working
even if i insert next to red-text and inside at tag.
pls help me

You have to assign this class to your image link

.red-text { color: red; } .smaller-image { width: 100px; }

h2 {
font-family: Lobster, monospace;
}

p {
font-size: 16px;
font-family: monospace;
}

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Indoor Outdoor
Loving Lazy Energetic
Submit

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