freeCodeCamp Challenge Guide: Size Your Images

freeCodeCamp Challenge Guide: Size Your Images
0

Size Your Images


Problem Explanation

For sizing your images, first create your class in your style tag.

An example:

<style>
  .fixed-image {
    width: 500px;
    height: auto;
  }

You can then add the class to your image:

  <img class="fixed-image" src="http://www.example.com/picture"/>
4 Likes

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.

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.

1 Like

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!

20 Likes

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!

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.

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.

1 Like

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 …

18 Likes

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:

4 Likes

Like this??

A cute orange cat lying on its back.

6 Likes

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!

2 Likes

Still can’t figure out. anyone pls help

1 Like

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.

5 Likes

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”>

15 Likes

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.

2 Likes

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

3 Likes

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…

2 Likes

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!

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.

I need help like yesterday