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

Posted by Leah Miller
Leah Miller
489 Points

display: block - Has me BLOCKED

Code Challenge Task 3 of 5

I have tried everything I can think of, but cannot get past the Bummer message. Task 2 was to add image & class

<img src="img/gratt.png" alt="OMG!" class="profile-photo"> this passed, but for task 3 "select image and set to be block element", I cannot seem to get it to work. I have tried:

.profile-photo {display: block;} img {display: block;} .profile-photo img {display: block;} I switched browsers I have placed it after the html close, in the section, after the section, after the footer.... everywhere. Help!

3 Answers

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

The editor in the challenge has two tabs. See where it says css/main.css? Click on that and enter your CSS there.

In fact, in the CSS file there is already a rule for images:

img {
  max-width: 100%;
}

So you can just add display:block; under the max-width property.

Leah Miller
Leah Miller
489 Points
Leah Miller
Leah Miller
489 Points

Wow! I knew the answer would be obvious. I was wondering why I was adding CSS to the html code in this challenge. DIdn't even notice the second file.

HUGE thanks. You are thebomb.com

Piccia Neri
Piccia Neri
8,937 Points
Piccia Neri
Piccia Neri
8,937 Points

Hi there, I was also blocked on this because I was adding the .profile-photo class, which the question seemed to ask. So my code was actually correct I think:

img .profile-photo { max-width: 100%; display: block; }

because, in fact, even the bummer message specifically requests that you select the profile photo. As the img selector already existed in the CSS, I thought you were asking to create another selector for that img class specifically. If I hadn't found this thread I would have been stuck.