Basic CSS: Size Your Images *HELP*

HTML-CSS
1

Hi,

I’ve been trying for ages to get past the Basic CSS: Size your Images section but I can’t figure it out. I’ve read the hint, watched the video, read other forum posts… but still no luck!

I keep getting an error message saying: " Your image should be 100 pixels wide. Browser zoom should be at 100%".

I’ve also deleted my Safari cookies/cache as that was suggested in another post, however, that hasn’t made a difference.

Can anyone help?

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

 img {
   .smaller-image {
      width: 100px;
   }
</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://bit.ly/fcc-relaxing-cat" 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="/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 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.2 Safari/605.1.15.

2

Hi!

It looks to me like you’ve doubled up on the CSS–you have two selectors in your code–one is img and one is .smaller-image.

CSS doesn’t nest (at least not on its own) so you should remove the first img { line and I think it will work then.

3

That worked!! Thank you so much! :slight_smile: I’m not really too sure I understand why I need to put h2 and p when talking about font size and fonts etc for headers/paragraphs but not identify for images?

4

You can select elements also by class, not only by tag. Selecting by class (the class that you apply to the element as, in this case, class="smaller-image") is an other way to select certain elements (you may want to change only a few elements created with a certain tag, instead of all of them)
There is also selecting by id, which you will meet later, and by property, which you will meet later. There are many other ways to select items with css…

1 Like
5

What @leahleen said!

So, in your example specifically, you could use img to select the element you need (because there is only one). But you can’t nest the curly brackets inside each other as you had originally done.

You can also use the element AND the class - so, for example you could specify img.smaller-image and that would work too. This would be useful if, for example, you had some other element (maybe a div or something) with the same class.

So when you’re talking about using h2 or p for example, you can either use just the element, or just the class or both. (And of course there are IDs and other ways to select specific parts of your HTML that you will learn as you progress through the course!)

1 Like
6