How to change the width of a pic using CSS?

HTML-CSS
1

Hey guys im having an issue with this challenge, its telling me to change the width of a pic using CSS. Everytime I think I did it it tells me I didnt. What am I missing? https://www.freecodecamp.org/learn/responsive-web-design/basic-css/size-your-images

2

Please post your full code. Thanks

3

Whoops I thought I did. How do I do that?

4

copy paste
i need 20 charecters

5

You only posted a link to the challenge. We can’t see what code you typed.

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.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

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

6

Ok this should show the full code https://www.freecodecamp.org/learn/responsive-web-design/basic-css/size-your-images

7

No… Again… We can’t see the code that you typed. That is only the link to the challenge…

8

Lets try this:

 <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{
    wide: 100px;
  }
  <img class=".smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
</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 src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
9

I’ve edited your post for readability. 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.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

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

1 Like
10

The classes name doesn’t start with a period here. Also, you shouldn’t be adding a new image element inside of the style tag.

1 Like
11

have you added the class to the image element and the style attribute to the class?

12

Got it! Yea when I do the challenges I just copy most of the examples they show on the side. So where do I put the code to change the width?

13

Tbh idk what any of that means this is only my 2nd day. grimacing:

14

in the style tags like this ex:

h1 {
  width: 100px;
}

that will make the h1 element have 100 px width or 100px wide see if you can figure out how to do it with your element!

15

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