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 trialMelisa Doran Cole
591 PointsWhy 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
41,171 PointsHi 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
591 PointsThanks 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
12,011 PointsIs 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
591 PointsHi James, it is the project for the How to make a website course.
Scott Craig
41,171 PointsAre 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!