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 Responsive Web Design and Testing Adjust the Profile Page and Header

Hayden Bryce
Hayden Bryce
3,103 Points

My header on "About" page is different to the rest. My profile photo also seems to not wrap effectively.

After following the current video, tracking my steps and code I can't seem to figure out why I have an extra white border/negative space on my About header. My profile pic doesn't seem to be contained in two columns or be wrapping very well?

6 Answers

Nick Yoho
Nick Yoho
6,957 Points

Hi Hayden, I'm working with your original workspace you posted (https://w.trhou.se/xpvn186ru8) , without any alterations Ivan suggested. In your main.css file the styling for your h3 tag should be margin and not max-width. That should fix your header issue

h3 { 
    margin: 0 0 1em 0;
}
Nick Yoho
Nick Yoho
6,957 Points

Also want to point out that your link to the responsive.css file on your html pages is forgetting a closing > and the link to your cofffedoughnut image is also broken.

Ivan Kozhunkov
PLUS
Ivan Kozhunkov
Courses Plus Student 8,480 Points

Sure, write # instead of .

In CSS

It's must to be so #main-container { overflow:hidden; margin: 0 auto;}

But in your code it looks like .main-container { overflow:hidden; margin: 0 auto;}

In About.html file

In about.html you choose an id incorrectly!

Your code <div id=main-container>

But correct syntax is <div id="main-container">

Hayden Bryce
Hayden Bryce
3,103 Points

Thank you! That made it very clear. Apologies for not quite getting it, I am very new. Now just need to figure out the profile image. Any ideas? https://w.trhou.se/hnevtq4aev

Ivan Kozhunkov
PLUS
Ivan Kozhunkov
Courses Plus Student 8,480 Points

Maybe, the reason for this behavior in your header concludes in float property. When we use floats, we must apply "overflow: hidden" property to the parent or add a clearfix rule also to the parent of an element.

clearfix rule syntax:

parent element : after { content : ""; display: table; clear : both;}

The easiest variant - add an "overflow : hidden" for body.

Problem with .profile-photo. Your content is not situated in the section space. Look where you final </section> tag is situate.

Hayden Bryce
Hayden Bryce
3,103 Points

Thank you for your time and advice, Ivan. After trying to understand and implement what you said I'm still having trouble/seeing no changes to either issue. Could you maybe show what code to put or adjust and where? I might understand it a bit better, Thanks in advance.

Ivan Kozhunkov
PLUS
Ivan Kozhunkov
Courses Plus Student 8,480 Points

I decided yor problem with About space at the top!

Wrapped all content of the body in about.html file with div and add him an id ="main-container"

<body>

<div id="main-container">

   //all content of body

</div>

</body>

and add this in CSS to /About Page/ part of you code

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

main-container {

overflow: hidden;

margin: 0 auto; }

Necessary add "#" before the id name in css, for some reasons it's invisible in this post.

You can see it on the link from my TreeHouse page https://teamtreehouse.com/workspaces/25685622#

Hayden Bryce
Hayden Bryce
3,103 Points

I think I have done and understood what you have told me to do but for me, its still not having any desired effect.

Update = https://w.trhou.se/dov2zlb26w

Your link also isn't available

Apologies if I'm misunderstanding, but if I can fix this with your help ill be very grateful.

Ivan Kozhunkov
PLUS
Ivan Kozhunkov
Courses Plus Student 8,480 Points

I had a look your code, you must to delete "." in your css file for main-container, in the part /* About */.

You write "." ( class selector) and "#" (id selector).

Just delete class selector.

And id selector also like a class selector must to be writing without " ".

Also delete "".

I wrote "" in comments toward just for separate grille selector from another text.

main-container {

    overflow:hidden;
    margin: 0 auto;

}

Why # before main-container isn't displayed in the code beyond? I write it, but it's invisible..)))

Write grille # without "" and any space for main-conteiner choose in css

It must to be so #main-container { overflow:hidden; margin: 0 auto;}

Hayden Bryce
Hayden Bryce
3,103 Points

Hi Ivan, I see what you meant and have made the correct adjustments from what I can see? Still no change or any effects, I must be missing something or again writing incorrect code.

UPDATE- https://w.trhou.se/ipgp1mo82e

Ivan Kozhunkov
PLUS
Ivan Kozhunkov
Courses Plus Student 8,480 Points

I open your code from your last link and i can't see any changes.

What i see again in about.html

<div id=main-container>

But it must to be looking so <div id="main-container">

Id name must to be conclude in "" !

And in CSS in Page About part

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

Your code : .main-container { overflow: hidden; margin: 0 auto;}

Must to be so: #main-container { overflow: hidden; margin: 0 auto;}

I didn't saw any changes.

Maybe you didn't save you changes in files?