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! While you're at it, check out some resources Treehouse students have shared here.
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
oliverlgreenjr
6,223 PointsCoarse = 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
6 Answers
Douglas Counts
10,060 PointsThe 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
1,790 PointsOliver, 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
6,223 PointsThank you.
It definitely was a mistake.
A good lesson though.
Thanks again.
Ollie
Douglas Counts
10,060 PointsCan you up vote my answer then by clicking the up arrow by it? Thanks....
Douglas Counts
10,060 PointsDouglas Counts
10,060 PointsSorry 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