freeCodeCamp Challenge Guide: Size your Images

freeCodeCamp Challenge Guide: Size your Images
0

#1

CSS has an attribute called width that controls an element’s width. Just like with fonts, we’ll use px (pixels) to specify the image’s width.

For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we’d use: <style> .larger-image { width: 500px; } </style>.


#2

hello. I tried to put this code it does not work.?
style>

 .small-image {
width: 100px;

}

.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#3

I can’t figure out why this isn’t working

link href=“https://fonts.googleapis.com/css?family=Lobster” rel=“stylesheet” type=“text/css”>

.red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .smaller-image{ width: 100px; }

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#4

dude it took me a few tries to get it right, Your close! I don’t want to just give you the answer straight away but go back and review the lesson about “Use a CSS Class to Style an Element” I promise you the answer is in there, and when it clicks your going to realize how close you already are. Good luck to you and keep coding!


#5

Hey I responded to the guy below you, and if you take a look it should help you continue on. Also double check all your punctuation and spelling is correct. Good luck to you!


#6

hello . i have used CSS Class to Style an Element , but still its showing " Your image should be 100 pixels wide. Browser zoom should be at 100%."

.smaller-image
{
width: 100px;
}

A cute orange cat lying on its back.


#7

Can you be more specific? Obviously a number of us are having the same issue - and have gone back through that lesson - and checked spelling and punctuation.


#8

Ok - I figured it out. You have to use both the CSS-format to establish the “class” of the .smaller-image in the style section, AND use the HTML-format to name the class=smaller-image within the img arrows (<img … >).

Not very well defined/explained …


#9

Hello.

I have the same problem: I’ve used the CSS-format to establisch the “class” of the .smaller-image in the style selection: .smaller-image {
width: 100px;
}

and

used the HTML-format to name the class=“smaller-image” within the img arrows: A cute orange cat lying on its back..

I cannot pass the second step: “Your image should be 100 pixels wide. Browser zoom should be at 100%.” and my Browser zoom is at 100%. Checked out all the spelling… 1000 times… :slight_smile:


#10

Like this??

A cute orange cat lying on its back.


#11

Did you get it? If so would you mind reposting the code? I’ve been trying many inputs and seem to be missing something. Good Luck!


#12

Still can’t figure out. anyone pls help


#13

Got it !!

Here is the answer for those who are struggling

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

h2 {
font-family: Lobster, Monospace;
}

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

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#14

There some weird thing going on with this one. The answer above is correct but for some reason I had to reset my code on the page in order to get it working. I didn’t do anything differently prior to the reset but it just didn’t want to work. I dunno.

The trick is immediately after the “img src” portion but BEFORE the ending arrow put in your class designation. So basically its still in the img src arrows, just at the end. I swear to god I did this with the above answer but it didn’t work for me until a reset.

Example:

Blockquote ------ (arrow removed) img src=“https://bit.ly/fcc-relaxing-cat” alt="A cute orange cat lying on its back. " class=“smaller-image”>


Help needed seriously
#15

still can’t progress…
Your image should be 100 pixels wide. Browser zoom should be at 100%. !
my browser is 100%

. smaller-image { width: 100px; } . red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; }

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#16

Again, put the class AFTER the Alt but still inside the arrows.


#17

Thanks for the quick reply! But i don’t think the position of the class matters that much, because placing it in front or at the end like you suggest I still get it done. My problem is with the pixels…


#18

ohh got it ! so my mistake was the “space between the dot and smaller”

.smaller-image - right
. smaller-image - wrong !!

Thanks for the help Stratus!


#19

I put this exact thing into the challenge put for some reason it wont work
someone tell me what I did wrong

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

h2 {
font-family: Lobster, Monospace;
}

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

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#20

I need help like yesterday