Help solve this css problem please

HTML-CSS
1

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

THE TASK “”

Create a class called smaller-image and use it to resize the image so that it’s only 100 pixels width.

my solution
img{
.smaller-image{
width: 100px;
}
error message

Your img element should have the class smaller-image .

Your image should be 100 pixels wide.

  **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/97.0.4692.71 Safari/537.36

Challenge: Size Your Images

Link to the challenge:

2

Hi @Chokov !

It looks like there is some confusion on how to style images using the class selector.

I would reset the lesson.

The first thing you have to do is add the class to your img element here

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

You learned about how to add classes in this lesson

The second thing you have to do is refer to the class selector in your css.
You can’t nest it inside the img selector like this

Please refer to the example code they gave in the lesson for proper syntax

 .larger-image {
    width: 500px;
  }

Follow that same structure with your challenge.

Hope that helps!

3

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

TASK
Create a class called smaller-image and use it to resize the image so that it’s only 100 pixels wide.
MY SOLUTION

.smaller-image{

width:100px;

}

ERROR MESSAGE

Your img element should have the class smaller-image .

Your image should be 100 pixels wide.

  **Your code so far**


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.smaller-image{
width:100px
}
}
.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/97.0.4692.71 Safari/537.36

Challenge: Size Your Images

Link to the challenge:

4

Does your <img> tag have the class smaller-image? I’m personally not seeing it.

5

PLEASE ATTEMPT, LIKE AN EXAMPLE[quote=“bbsmooth, post:2, topic:492308, full:true”]

Does your <img> tag have the class smaller-image? I’m personally not seeing it.
[/quote] I ONLY NESTED INSIDE AN IMAGE SELECTOR AND IT STIL DIDN’T WORK

6

This is the <img> tag. The error message is telling you that you should put the class smaller-image on this tag. You have to add it to the actual <img> tag in the HTML.

7

please where in the tag? cus i’m confuse, i’m following the example as stated

8

Look at some of the other HTML tags in this challenge that have classes, for example:

<h2 class="red-text">CatPhotoApp</h2>

Does that give you a hint on how to do it?

9

yes a bit, where do i add the style element as it is very different from the example given

10

There are two steps to this challenge. You have to create the CSS style rule for the smaller-image class which you have done already in the <style> tag.

The second step is to add the smaller-image class to the <img> tag so you can associated the style rule you created with the image. Once you do this step you should pass the challenge.

11

Tell us what’s happening:
Describe your issue in detail here.HE TASK “”

Create a class called smaller-image and use it to resize the image so that it’s only 100 pixels width.

my solution
img{
.smaller-image{
width: 100px;
}
error message

Your img element should have the class smaller-image .

Your image should be 100 pixels wide.

  **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/97.0.4692.71 Safari/537.36

Challenge: Size Your Images

Link to the challenge:

12

I would reset the lesson again.

The first thing you need to do is add the class of smaller-image to the img element.
This is the image element

Make sure you do that first before moving onto anything else.
Please review this lesson on how to add classes to html elements.

Once you get that, then you can move onto the second part.

As mentioned earlier, this is not the correct syntax

You almost did it correctly here but you forgot the semicolon

Hope that helps!

1 Like
13

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