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

CSS How to Make a Website Adding Pages to a Website Style New Pages

Melisa Doran Cole
Melisa Doran Cole
591 Points
Posted by Melisa Doran Cole
Melisa Doran Cole
591 Points

Why are my pictures all showing up as tiny images?

All of my pictures (profile pic and gallery pics) are showing up as these tiny thumbnail images. I even resized my profile image in lightroom to be 200px x 200px like suggested in the video. Here is the code: .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

It is showing up on my screen as about a cm wide.

Hints??

4 Answers

Scott Craig
Scott Craig
41,171 Points
Scott Craig
Scott Craig
41,171 Points

Hi Melissa,

If you wan't the picture to be bigger it is then it is the max-width property you will need to increase. 

.profile-photo { 
max-width: 200px; 
 }
Melisa Doran Cole
Melisa Doran Cole
591 Points
Melisa Doran Cole
Melisa Doran Cole
591 Points

Thanks James & Scott... tried both- still not changing anything: .profile-photo { display: block; max-width: 250px; margin: 0 auto; margin-bottom: 30px; border-radius: 20%; }

James Home
James Home
12,011 Points
James Home
James Home
12,011 Points

Is there a fixed width and height in the html?

I thought you were trying to complete the code challenge (my CSS passes), rather than your own project.

Melisa Doran Cole
Melisa Doran Cole
591 Points
Melisa Doran Cole
Melisa Doran Cole
591 Points

Hi James, it is the project for the How to make a website course.

Scott Craig
Scott Craig
41,171 Points
Scott Craig
Scott Craig
41,171 Points

Are you using firefox?

If you scroll down below the video to the teachers notes they have this note:

Correction for Firefox

There's a bug in the CSS for this video that causes the profile picture to display incorrectly in Firefox. In order to correct the issue, the clear property with the value both needs to be applied to the .profile-photo class. Here's what the corrected code looks like:

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

Try adding this and see what happens 

clear: both;

Hope that helps!