How do i resize my image?

HTML-CSS
#1

Tell us what’s happening:
I can’t figure out where to put the image style code within the google link so as the resize the image.

  **Your code so far**


<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;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<style>
.smaller-image {
  width:100px;
}
</style>
<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>

<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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.79 Safari/537.36

Challenge: Size Your Images

Link to the challenge:

#2

I’m not sure what you mean by google link. Do you mean the link you provided in your post? Or do you mean the link tag in the actual code? In any case, the challenge asks you to create a class, add a width style to it then add that class to the img. You don’t need to add anything to the link tag in the code.

In the example, you can add the class between the given style tags like so:

Don’t create new <style> tags, just put it between the given ones in the example.

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

  h2 {
    font-family: Lobster, monospace;
  }

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

/* Here is where you could put it */
  .smaller-image{
    width: 100px;
  }
</style>

Once you add the class and style, you must then add the class inside the img tag in order to apply said style.

<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.">

Edit: Didn’t realize you already attempted to put the class inside a new set of <style> tags. Updated my answer

#3

Hello there @OWIN welcome to the FCC community :confetti_ball:.
You seem to have created the .smaller-image styles in a separate <style> tag which would result in an error.

To complete this challenge and also as you continue developing web applications, you need to make sure all of your styles are in a single <style> tag if you are using the internal CSS. Do not have more than one <style> tag in your document.

And also ensure you add the class to your <img> element before or after creating the desired styles you want in your <style> tag.
Like this:

Hope this helps. Happy coding :+1:!

1 Like