Basic CSS resize your image

I am unable to complete the second part of the task changing the width to 100px:
Describe your issue in detail here.

  **Your code so far
.red-text { color:red; }

h2 {
font-family: Lobster, monospace;
}

p {
font-size:16px;
font-family:monospace;
.smaller-image {
width: 100px;
}
red-text{
color:red;
}
}

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
**

<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;
 .smaller-image {
    width: 100px;
}
red-text{
    color:red;  
}
}
</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 class="smaller-image" 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; rv:95.0) Gecko/20100101 Firefox/95.0

Challenge: Size Your Images

here you have syntax mistake

if you want to give style to that image you can give the same way as given but , that class small-image should be outside of p element

i mean

p {
// p element style go here
}
.small-image {
// image style go here
}

your second mistake in that code is you have additional curly bracket at the end remove that the red-text is a class so you should use .red-text not red-text because it’s a class selector not element or tag

There is an error in the code but I cannot identify it.

Regards

| rio_sanap
January 13 |

  • | - |

laohu:

p {
font-size:16px;
font-family:monospace;
.smaller-image {
width: 100px;
}
red-text{
color:red;
}
}

here you have syntax mistake

if you want to give style to that image you can give the same way as given but , that class small-image should be outside of p element

i mean

p {
// p element style go here
}
.small-image {
// image style go here
}

your second mistake in that code is you have additional curly bracket at the end remove that the red-text is a class so you should use .red-text not red-text because it’s a class selector not element or tag

i am able to see that you have one extra curly bracket at the end of your code

Screenshots are not helpful. Please post ALL of your code.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hi, it is best practice to make your CSS more readable so that you can make it easier for yourself to see any errors as you will find when first starting out that it is easy to miss a closing bracket or to add more than what is needed.

A good way of making this more readable is to always have a line of space between each element you are styling. For example

h1  {
font-family: monospace;
}

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

.small-image {
width: 100px;
}
}

Im sure you will agree this makes it a little easier to read and you can see where there is a bracket missing and that there is one extra bracket at the end of the code in the above example.

I hope this helps :slight_smile:

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