Why does my image disappear when I type in display: block in the css?

Question

My about us page was looking fine until I added the code to .css. Everything works except when I put display: block it makes my image completely disappear.

My contact page is also not showing up at all. It is saying page cannot be found.

Answer 1 · 2015-07-14T21:53:21Z

July 14, 2015 9:53pm

This won't fix it, but it is a bug:

body { 
  font-family: 'Open Sans' sans-serif; 
}

You are missing the apostrophe between Open Sans and sans-serif:

body {
   font-family: 'Open Sans', sans-serif; 
}

Answer 2 · 2015-07-14T22:33:53Z

July 14, 2015 10:33pm

It's not actually disappearing per say, you can see it if you scroll to the right. What's happening is that it's getting displaced because of the float style on the header.

.profile-photo {
  clear: both;  // Add this line here to your .profile-photo styles! <---
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

This will make it so the floats don't interfere with your profile picture's positioning.

Floats can be a bit tricky, and it definitely takes practice to get used to how they behave.

Answer 3 · 2015-07-14T21:04:45Z

July 14, 2015 9:04pm

Can you post your code with markdown? HTML and CSS.

Answer 4 · 2015-07-14T21:05:39Z

July 14, 2015 9:05pm

css: /*****************++++++* GENERAL *****************++++++*/

body { font-family: 'Open Sans' sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/*****************++++++* HEADING *****************++++++*/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Montserrat', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/*****************++++++* NAVIGATION *****************++++++*/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 700; padding: 15px 10px; }

/*****************++++++* FOOTER *****************++++++*/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/*****************++++++* PAGE PORTFOLIO *****************++++++*/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 }

/*****************++++++* PAGE: ABOUT *****************++++++*/

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

/*****************++++++* COLORS *****************++++++*/

/* site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #39add1; border-color: #369ab9; }

/* nav background on mobile */ nav { background: #369ab9; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #39add1; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #287a94; }

about.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Emily Plummer | Senior Media Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Oxygen|Cabin:400,400italic|Fjalla+One|Open+Sans:400,700,700italic,400italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Emily Plummer</h1> <h2>Senior Media Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.hmtl">Contact</a></li> </ul>

  </nav>
</header>
<div id="wrapper">
  <section>
    <img src="images/Emily.jpg" alt="Emily Plummer" class="profile-photo">
    <h3>About</h3>
    <p>Hi, I'm Emily Plummer. This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy spending time with my family.</p>
  </section>
  <footer>
    <a href="https://www.facebook.com/emily.plummer.94"><img src="images/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2015 Emily Plummer.</p>
  </footer>
</div>

</body> </html>

Answer 5 · 2015-07-14T21:19:19Z

July 14, 2015 9:19pm

Can you post a link to a screen shot? use the camera icon in the top, right corner of the workspace.

Answer 6 · 2015-07-14T21:21:52Z

July 14, 2015 9:21pm

https://w.trhou.se/n05ibnbuf6

Answer 7 · 2015-07-14T21:35:12Z

July 14, 2015 9:35pm

I see the issue with the contact page, but the photo is still there. What browser are you using?

Answer 8 · 2015-07-14T21:37:30Z

July 14, 2015 9:37pm

Firefox

Answer 9 · 2015-07-14T21:39:04Z

July 14, 2015 9:39pm

If you can, try chrome.

Answer 10 · 2015-07-14T21:40:03Z

July 14, 2015 9:40pm

I will have to download it. I noticed earlier that some things on other sites weren't showing up, but didn't think anything of it.

Answer 11 · 2015-07-14T21:40:05Z

July 14, 2015 9:40pm

I will have to download it. I noticed earlier that some things on other sites weren't showing up, but didn't think anything of it.

Answer 12 · 2015-07-14T21:41:14Z

July 14, 2015 9:41pm

I decided to replace the code from the home page to the contact page and I was able to get there.

Answer 13 · 2015-07-14T21:42:39Z

July 14, 2015 9:42pm

Never mind, now that won't work.

Answer 14 · 2015-07-14T21:50:29Z

July 14, 2015 9:50pm

The image shows in Safari, but yeh the contact page still isn't working.

Answer 15 · 2015-07-14T21:57:35Z

July 14, 2015 9:57pm

Look at the errors you get from testing you code in the W3C Validator, here is the one for CSS.

Answer 16 · 2015-07-14T22:12:46Z

July 14, 2015 10:12pm

Try contacting help@teamtreehouse.com.

Answer 17 · 2015-07-14T22:58:44Z

July 14, 2015 10:58pm

Have you added clear: both to your css like the first person suggested? I don't see it in the css you posted. I had the same issue. The code I posted below is all you need as far as the about page image is concerned.

/************************************** PAGE ABOUT **************************************/

.profile_image {

clear: left;

display: block;

max-width: 150px;

margin: 0 auto 30px; /Top, Sides Right and Left, Bottom/

border-radius: 100%; /* This rounds the corners of an image. A value of 100% makes a circle. */

}

Answer 18 · 2015-07-16T15:52:53Z

July 16, 2015 3:52pm

Thank you all, my images still isn't showing up in Firefox, but is in other browsers. I will email help to see if they can tell me why contact page isn't showing.

Answer 19 · 2015-07-20T20:58:41Z

July 20, 2015 8:58pm

I just created a new workspace and everything is running smoothly now. Thanks for all your help.

Answer 20 · 2015-07-20T22:59:00Z

July 20, 2015 10:59pm

Strange. I'm glad you got it working!

Welcome to the Treehouse Community

Looking to learn something new?

Emily Plummer

Emily Plummer

Why does my image disappear when I type in display: block in the css?

Benjámin Both

Benjámin Both

20 Answers

Caleb Kleveter

Caleb Kleveter

rydavim

rydavim

Letta Raven

Letta Raven

Caleb Kleveter

Caleb Kleveter

Emily Plummer

Emily Plummer

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Caleb Kleveter

Caleb Kleveter

Emily Plummer

Emily Plummer

Caleb Kleveter

Caleb Kleveter

Emily Plummer

Emily Plummer

Caleb Kleveter

Caleb Kleveter

Emily Plummer

Emily Plummer

Emily Plummer

Emily Plummer

Caleb Kleveter

Caleb Kleveter

Caleb Kleveter

Caleb Kleveter

Emily Plummer

Emily Plummer

Caleb Kleveter

Caleb Kleveter

Caleb Kleveter

Caleb Kleveter

Nathan Brazil

Nathan Brazil

Emily Plummer

Emily Plummer

Emily Plummer

Emily Plummer

Caleb Kleveter

Caleb Kleveter