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

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

Dorian Thornton
Dorian Thornton
737 Points
Posted by Dorian Thornton
Dorian Thornton
737 Points

display: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?

miikis
miikis
44,957 Points

You 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.

4 Answers

Mark Ihrig
Mark Ihrig
19,966 Points

There 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
Sarah Stensberg
1,214 Points

This worked for me, as well. Thanks! :)

Filip Nikodinovic
Filip Nikodinovic
845 Points

clear: both; works for me. Great!

Sergei Fisenko
Sergei Fisenko
2,277 Points

thanks a lot mate

Dorian Thornton
Dorian Thornton
737 Points
Dorian Thornton
Dorian Thornton
737 Points

clear: both worked! Thanks Mark, and everyone for the responses.

Mark Ihrig
Mark Ihrig
19,966 Points

You are welcome! I am glad that it worked for you!

Jonathan Romine
Jonathan Romine
9,344 Points
Jonathan Romine
Jonathan Romine
9,344 Points

you have to add a width property (width:100%)

Christopher Blanton
Christopher Blanton
19,337 Points
Christopher Blanton
Christopher Blanton
19,337 Points

Setting 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.