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 trialDorian Thornton
737 Pointsdisplay:block applied and my photo disappears
This works, but the photo is not centered:
.equipment-photo {
/* display: block; */
max-width: 350px;
margin: 0 0 30px;
padding: 0 10%;
border-radius: 20px;
}
and with this the photo disappears:
.equipment-photo {
display: block;
max-width: 350px;
margin: 0 0 30px;
padding: 0 10%;
border-radius: 20px;
}
Why?
4 Answers
Mark Ihrig
19,966 PointsThere is a possibility that this might be a Firefox Browser issue. On the following thread, someone had a similar problem with a photo moving all the way to the right of the browser. It was so off centered that it looked like it had disappeared. https://teamtreehouse.com/community/trouble-with-display-block-in-css-for-profile-photo
If this is the same problem, then the following solutions might help.
The first one of course is to view this in a Chrome Browser. It might center the image.
The second one is to add the "clear:both; " into your code. Clear defines what floating elements are allowed on each side. "clear:both" states that there are no floating elements allowed on either the right or left side of the photo.
.equipment-photo {
clear: both;
display: block;
max-width: 350px;
margin: 0 0 30px;
padding: 0 10%;
border-radius: 20px;
}
Sarah Stensberg
1,214 PointsThis worked for me, as well. Thanks! :)
Filip Nikodinovic
845 Pointsclear: both; works for me. Great!
Sergei Fisenko
2,277 Pointsthanks a lot mate
Dorian Thornton
737 Pointsclear: both worked! Thanks Mark, and everyone for the responses.
Mark Ihrig
19,966 PointsYou are welcome! I am glad that it worked for you!
Jonathan Romine
9,344 Pointsyou have to add a width property (width:100%)
Christopher Blanton
19,337 PointsSetting the width property to 100% doesn't work for me in firefox, but setting clear:both does. However, in Microsoft Edge (and I'm guessing google as well) this is not necessary.
miikis
44,957 Pointsmiikis
44,957 PointsYou should post the rest of the code... the rest of the css and the html. Without that info, the answer could be any number of things.