Need to be pointed in the right direction with this CSS Coding

Tell us what’s happening:
Describe your issue in detail here.

I’m trying to adjust the font size to a smaller, wide format with the measurement of pixels. It probably is off by the smallest detail, but could someone please point me in the right direction? The way I attempted it should be visible. Thanks.

  **Your code so far**

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style
<img>
    .smaller-image { 
      width: 100px;
    } 
    </img>
.red-text {
color: red;
}
h2 {
  font-family: Lobster, monospace;
}
p {
  font-size: 16px;
  font-family: monospace;
}
</img>
</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>

<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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Size Your Images

Link to the challenge:

Hey there and welcome to the forums!! :slightly_smiling_face:

When you say a “smaller wide format”, do you mean you want short text with letter farther apart?
Perhaps something like the letter-spacing style would be useful?

One thing I notice is you have an <img> element in your <style>. <style> should only include CSS so that’s not valid. If you are trying to apply your .smaller-image to your <img> you need to give the <img> tag the smaller-image class.

I did apply the smaller image class. I may have applied it in the wrong format, but I was going by the directions of freecodecamp but it says I’ve done it wrong.

Which alternate format would you suggest? Thanks for reaching out by the way.

Currently your style is:

<style>
<img>
    .smaller-image { 
      width: 100px;
    } 
    </img>
.red-text {
color: red;
}
h2 {
  font-family: Lobster, monospace;
}
p {
  font-size: 16px;
  font-family: monospace;
}
</img>

However you can’t put HTML elements inside of a <style>, so remove the three <img> tags:

<style>
.smaller-image { 
  width: 100px;
} 
.red-text {
  color: red;
}
h2 {
  font-family: Lobster, monospace;
}
p {
  font-size: 16px;
  font-family: monospace;
}
</style>

Then you can apply the smaller-image class to an element by adding it that elements class attribute:

<img class="smaller-image" src="img-src">

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