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
Robert Marczak
12,358 Pointsimg and display:block
when i set display to block to img class profile-photo my image disappears from page. why is that??
7 Answers
. Ali
9,799 Pointsplease share some code with us :) html and css .. cheers
Robert Marczak
12,358 Pointshtml
<section>
<img src="img/mtrobert.jpg" alt="Photo of mtrobert" class="profile-photo">
<h3>About</h3>
<p></p>
<p>If you would like to follow me on twitter my username is <a href="http://twitter.com"> @Rob</a></p>
</section>
css
.profile-photo{ display:block; max-width:150px; margin:0 auto 30px; border-radius:100%; } just following the lessons for now
Ferenc Marcsó
1,835 PointsIt is an Firefox specific problem. I found a solution based on the previous lessons.
about.html
<section>
<div id="profile-picture">
<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
</div>
...
main.css
.profile-photo {
width: 100%;
border-radius: 100%;
}
#profile-picture {
display: block;
max-width: 150px;
margin: 0 auto 30px;
}
. Ali
9,799 Pointsimg is a block element , I am sorry I wish i could understand you a little more . however look at this codepen http://codepen.io/alithecoder/pen/Hsinf . see if this is what you wanting..
Robert Marczak
12,358 Pointsthanks, I need to have a look on this one because even treehouse downloaded content(html and css) behavies same way
Jeff Busch
19,287 PointsHi Robert,
When I use the code you supplied everything seems to work, in Chrome. Of course I had to change the image file name. I don't suppose there is more code we can look at?
Jeff
julianttt
960 Pointsimg are inline elements so setting it display: block will completely change how it flows on the page.
Robert Marczak
12,358 PointsThe thing is I do everything exactyly as it is in videos but it works diffrent way. Is it possible since video were uploaded to treehouse servers, the way how img elements behave has been changed??