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
catherine cardona
737 PointsClass property of .profile-photo not applying changes
Hi Guys, Could someone please help me, not sure what I am doing wrong
This is my about page code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Catherine Cardona | WordPress Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Catherine Cardona</h1> <h2>Developer</h2> </a> <nav> <ul> <li><a href="about.html" class="selected">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/Cat.png" alt="Photoshot" class="profile-photo"> <h3>About</h3> <p>Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </section> <footer> <a href="https://twitter.com"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a> <img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"> <p>Ā© 2016 Catherine Cardona.</p> </footer> </div> </body> </html>
I am trying to apply this CSS to the
<img src="img/Cat.png" alt="Photoshot" class="profile-photo">
CSS
/********** Page About**********/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
But after all, changes seems not to take place.
Thanks in Advance.
4 Answers
Steven Snary
17,540 PointsYour code looks correct....
So I'd check your CSS link and CSS file name to make sure they match your directory structure and code.
1) You should have a CSS directory (folder in windows) in the same directory as your html page (index.html?) The page that you posted the HTML from in your question.
2) In that CSS directory you should have your CSS file named main.css. The CSS in that file is the CSS code that you listed in your question.
You are correctly selecting the .profile-photo class in your CSS and you've correctly added that class to the img element in your HTML
Hope this helps!
Steven Snary
17,540 PointsGood Evening Catherine,
I've just gotten back from being out of town for a few days.....
Are you hosting your HTML and CSS somewhere that I could view it? Or could you send me a copy to run on my local machine and test?
I'm not sure what else to try as the code looks correct.
Steven Snary
17,540 PointsForget that last reply - I copied your code to test it.
Quick Question: Can you see your cat.png picture and is its shape rectangular or oval?
catherine cardona
737 PointsHey thanks so much, all is fine now, just a missing /
:)
Steven Snary
17,540 PointsGlad you could figure it out. :-)
It's usually some little thing, like missing punctuation.
catherine cardona
737 Pointscatherine cardona
737 PointsHello Steven,
I checked all you said and for me, all is looking right, which is weird is that all the CSS changes were taking place completely normal just till I got to this point that is not working. Please advise what to do here. I have been following all the steps of the video in order to make the site from scratch.
Thanks so much