CSS: Size Your Images

CSS: Size Your Images
0

#1

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

img { width: 100px; }

"Your img element should have the class smaller-image."


#2

Writing an actual question helps a lot :slight_smile:

You’re missing a class name.


#3

in this case your CSS is changing the width of the image by targeting the img html item…

you want to do something akin to what you did in earlier exercises where you changed font colours but user classes like .pink-text etc…


#4


#5

Instead of using img tag make a requested class .smaller-image and add it to image himself …


#6


#7

If you see the left side of your screenshot, it says to create a class called smaller-image,

In your code you have created class called red-text, similar to that create a class with smaller-image as class name

And instead of img { } in your styling part, you have to reference that class name (smaller-image)


#8

Maybe applying the class to the img element? <img class="smaller-image" src...

In the last screenshot, both tests fail because previously you were applying the correct size to the img element, and when you changed “img” to “.smaller-image”, not a single element is getting the size applied to because there is no html element with the specified class name. The challenge is asking you to be specific and target an img with a class name of “smaller-image”, so the code I mentioned in the first paragraph should work.