Basic CSS: Size Your Images (SEND HELP!)

HTML-CSS
1

Hello, I am totally new to this coding. I was doing good until I hit this hurdle. I am confident that my code is correct as the program says so, however it states that my browser is not at 100% zoom. I am currently using Safari: Version 12.1.2 (12607.3.10). I shall post my code and I want thank you guys in advance for this help!

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

h2 {
font-family: Lobster, monospace;
}
.smaller-image
width: 100px;

p {
  font-size: 16px;
  font-family: monospace;
}
</style>

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
``` Indoor Outdoor
Loving Lazy Energetic
Submit ``` // running tests Your image should be 100 pixels wide. Browser zoom should be at 100%. // tests completed ``` I got this one checked:Your `img` element should have the class `smaller-image` . ``` I have this one wrong: Your image should be 100 pixels wide. Browser zoom should be at 100%.
2

Hi Shayna!

Welcome to freeCodeCamp :wave: :smile:

The code you’ve posted has come out a bit wonky on the forum, but it looks like you’ve forgotten to wrap your new .smaller-image CSS rule in curly brackets.

You should have something like:

.smaller-image {
    width: 100px;
}

Then you need to apply this rule to the img element by giving it the class of .smaller-image.

In Safari, to make sure your browser zoom is 100%, just use the following keyboard shortcut:

CMD + 0 (Hold down the command key and the zero key at the same time)

Hope that helps! :slight_smile:

Phil

3

Thank you so much!! I was getting so frustrated about this part. I did miss the curly brackets {}. So whenever you put .smaller-image or h2, this bracket->({ )has to behind it.

1 Like
4

Yep, the standard way to make a CSS rule is:

selector {
   property: value;
}
1 Like