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
Ryann Green
11,010 Pointsprofile-photo Styles Not Showing
I'm not sure what I'm doing wrong. I've tried to double check everything, but I can't find what I'm doing wrong.
<img src="img/nick.jpg" alt="Photo of Nick" class="profile-photo"> ```
.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; } ```
9 Answers
Stone Preston
42,016 Pointsdid you save your css file before viewing the page in the browser
Ryann Green
11,010 PointsYes, I did. The styles still did not affect the image.
Stone Preston
42,016 Pointsis the other css in the file being applied? double check that you saved your html as well
Ryann Green
11,010 Pointslike this?
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
Alright. I re-saved everything.
Stone Preston
42,016 Pointsi assume you have some other css styles listed in your main.css file besides the stuff that affects the profile photo. when you view the page in the browser, do those styles get applied?
Ryann Green
11,010 PointsOh. Yes, sorry. All the styles seem to be working except for those applied to the profile photo.
Stone Preston
42,016 Pointsin the project files I noticed Nick doesnt have clear: both in his css
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
try using that and see if it works
Ryann Green
11,010 PointsStill no luck. ): I don't know what I have done. The code is unhappy with me.
Stone Preston
42,016 Pointsyour code looks correct. Im thinking its more likely a path/naming issue or saving or something.
Ryann Green
11,010 PointsI've tried to do the next step, and the styles don't seem to be applying correctly for it either. The bullets are still showing up for the ul.
<ul class="contact-info">
<li class="phone"><a href="tel:225-222-2222">225-222-2222</a></li>
<li class="mail"><a href="mailto:email@gmail.com">email@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=twitter">@twitter</a></li>
</ul>
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
Stone Preston
42,016 Pointscan you double check that you have a file called main.css thats in a folder called css. the folder called css should be at the root of your project
Ryann Green
11,010 PointsThe css folder is there, main.css is inside. All of the other styles are working, changing the colors, text, section width, etc. It worked correctly until I added the second page, and now nothing seems to be changing.
Stone Preston
42,016 Pointsgo back and save all your html and all your css files one more time. it really sounds like a saving issue to me. But its hard to say without looking at anything and im about to head out so hopefully you figure it out. sorry I couldnt help much
Ryann Green
11,010 PointsThat's alright. Thanks for your time. (:
Ryann Green
11,010 PointsI just renamed my css sheet, and changed all of the links on my pages, restarted workspaces, and now it's working! You must have been right about it being a saving/path problem. Thank you!
Stone Preston
42,016 Pointsawesome! glad its working now