Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

oliverlgreenjr
oliverlgreenjr
6,223 Points

Coarse = CSS Basics, Lesson = Width and Height Properties. Why doesn't the "down arrow img" resize in the work space?

I checked the code many times over the last couple of days. It is correct but the image doesn't resize to "50px" when I target the ".arrow" with "width: 50px;"

Here is the "index.html" code

img class="arrow" src="img/arrow.svg" alt="Down arrow"

(I had to remove the angle brackets "<>" to get the code to show)

Here is the "style.css" code:

.arrow { width: 50px; }

My question is, did I miss something or is the workspace malfunctioning.

Thank you for your help.

Ollie

Sorry you are having a problem but I was able to get this to work. I believe you must have a typo somewhere. So here are some steps to make this work.

Step 1. Make sure you are adding the "arrow" class to the image tag like so:

<img class="arrow" src="img/arrow.svg" alt="Down arrow">

Don't put a dot (".") inside the class name, just class="arrow". Also make sure you have quotes around the arrow name like so: "arrow"

Step 2. Make sure you are adding your code

.arrow { width: 50px; }

to the very end of the CSS file.

Step 3. Lastly, save both the html and css files before viewing. It should now work.

Good luck...

-Doug

6 Answers

The problem is in your CSS file. If you scroll down to your line 139 you will see an extra } inside the file. Remove it. Also you didn't properly close the rule just above your .class rule with a }. So currently the .wildlife rule is running into your .arrow class rule that you added. Make those two changes and it runs fine.

I assume that when you edited the .class rule, you must have moved the } from the previous rule down to the bottom of the file by mistake.

Good luck,

Doug

Vasilij Zhukov
Vasilij Zhukov
1,790 Points

Oliver, can you take a snapshoot of your workspace? (here is a guide how to do that :) https://teamtreehouse.com/forum/workspace-snapshots )

And here is an same example of your code in my workspace

oliverlgreenjr
oliverlgreenjr
6,223 Points

Thank you.

It definitely was a mistake.

A good lesson though.

Thanks again.

Ollie

Can you up vote my answer then by clicking the up arrow by it? Thanks....