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

Posted by Justin Swatloski
Justin Swatloski
5,769 Points

Profile picture just will not pick up CSS

Here's my HTML code:

<section>
<img src="img/nick.jpg" alt="nick" class="profile-pic" />   

<h3>About</h3>
<p>A long enough series of words to ensure that this partcular sentence has everything that is needed in order to access a second line in the website the give it a more full and robust feel. </p>

</section>

and the CSS that connects: 

.profile-pic{
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

But nothing happens. I've tried adding the "clear" property to the css and setting it to "both", just because I read somewhere it helped, but to no avail. I've tried renaming the class, setting the image into a div element, then selecting the img children of the div element, nothing has worked. Any tips would be appreciated.

1 Answer

Richard Ling
Richard Ling
8,522 Points
Richard Ling
Richard Ling
8,522 Points

This seems to work fine for me. Copied your code and used in a blank html file with just:

<style>
.profile-pic{ display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
</style>
<section>
    <img src="drax.png" alt="nick" class="profile-pic" />   

    <h3>About</h3>
    <p>A long enough series of words to ensure that this partcular sentence has everything that 
    is needed in order to access a second line in 
    the website the give it a more full and robust feel. </p>
</section>

Only thing I changed was the image filename to one I had.

Where are you putting your CSS? Is it in the same file, in a referenced CSS file? If so, is that file referenced correctly?

Additionally, have you checked if you have any other CSS styles that might be overriding these ones? Or another class called the same name?

Justin Swatloski
Justin Swatloski
5,769 Points

Then you understand my frustration! I believe it's set up correctly. My CSS in located in a css folder, referenced by

link rel="stylesheet" href="css/styles.css"

All my other styles show up just fine, the image itself loads as well. I can manipulate every element besides this one, including other images that are defined by classes.

To my knowledge, there are no classes that should override there, and there are definitely none of the same name. The only relevant CSS style I have is an img { max-width: 100% } tag, but that should really have no effect.

Richard Ling
Richard Ling
8,522 Points
Richard Ling
Richard Ling
8,522 Points

Very strange - are you able to try pulling that CSS class out of your CSS file, and just putting it in your HTML file in a style tag as I've done above? Just to see if that makes a difference, and try and rule out it being to do with the file or referencing.

If you still have problems, are you able to post the entire html and css files?

Justin Swatloski
Justin Swatloski
5,769 Points

After carefully scrutinizing my CSS, I found a stray closing bracket, and that solved my issue. Thanks for the assist!

Richard Ling
Richard Ling
8,522 Points
Richard Ling
Richard Ling
8,522 Points

Great, no problem, glad you got it sorted :)