Stuck on the html size your images challenge

Stuck on the html size your images challenge
0

#1

Here is the code I used. Am I putting the code in the wrong spot? Any help would be greatly appreciated. Thanks


#2

@gotbassoon It’s better if you provide a link to the challenge and also paste the code you have so far between 2 sets of backticks.

```

 https://forum.freecodecamp.com/t/forum-code-formatting/25574

#3

The smaller image class that you’re creating (the .smaller-image {…}) is css, so it should be in between the style tags. Then the image should call that by having the class=“smaller-image” class in it.


#4

Here is a ling to the challenge https://www.freecodecamp.com/challenges/size-your-images#?solution= <link%20href%3D"https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster"%20rel%3D"stylesheet"%20type%3D"text%2Fcss"> <style> %20%20 %20%20.red-text%20{ %20%20%20%20color%3A%20red%3B %20%20} %20%20h2%20{ %20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B %20%20} %20%20p%20{ %20%20%20%20font-size%3A%2016px%3B %20%20%20%20font-family%3A%20Monospace%3B %20%20} <%2Fstyle> <h2%20class%3D"red-text">CatPhotoApp<%2Fh2> <img%20%20src%3D"https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat"%20alt%3D"A%20cute%20orange%20cat%20lying%20on%20its%20back."%20<style>%20.smaller-image%20{%20width%3A%20100px%3B<%2Fstyle> <p%20class%3D"red-text">Kitty%20ipsum%20dolor%20sit%20amet%2C%20shed%20everywhere%20shed%20everywhere%20stretching%20attack%20your%20ankles%20chase%20the%20red%20dot%2C%20hairball%20run%20catnip%20eat%20the%20grass%20sniff.<%2Fp> <p%20class%3D"red-text">Purr%20jump%20eat%20the%20grass%20rip%20the%20couch%20scratched%20sunbathe%2C%20shed%20everywhere%20rip%20the%20couch%20sleep%20in%20the%20sink%20fluffy%20fur%20catnip%20scratched.<%2Fp>

Here is the code I used ```

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

CatPhotoApp

<img src=“https://bit.ly/fcc-relaxing-cat” alt=“A cute orange cat lying on its back.” .smaller-image { width: 100px;

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

That really helped. Thanks so much!


#6

You made a mistake in the code in the image part:

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back." .smaller-image { width: 100px;``>

Because you put the CSS style inside the HTML tag, you need to collocate in this way:

<style>
    .red-text {
    color: red;
    }

    h2 {
    font-family: Lobster, Monospace;
    }

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

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

    CatPhotoApp
    <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back." class="smaller-image">

#7

thanks @Belegurth :slight_smile:


#8

Here’s a solution. Hope it helps. :slight_smile:


#9

thanks @Vicky01 :slight_smile: .