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

CSS

Posted by Benny Wu
.a{fill-rule:evenodd;}techdegree
Benny Wu
Front End Web Development Techdegree Student 2,938 Points

A white strip "logo" above header only in ABOUT page instead of green.

During Stage 8 Adjust the Profile Page and Header of How to Make a Website we are instructed to use this code

.profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

to shift our profile photo to the left of our About page. However, I noticed once I put in this code a white strip shows up at the top of my page where the id logo above our title (name) where it usually stays green (#6ab47b). This does not occur for the index or contact pages. The only way I've been able to resolve this is by deleting or turning the above code into a comment so that it doesn't register but I want to find a way to include the code and not have the white strip.

2 Answers

Benny Wu
.a{fill-rule:evenodd;}techdegree
Benny Wu
Front End Web Development Techdegree Student 2,938 Points

I had a typo under my h3 tag in my main.css file. Under the general styling my h3 tag had a font size typed in as "lem" instead of "1em". After correcting this my problem had been solved. No more white strip at the top.

jerry bremser
jerry bremser
3,941 Points

oh ok hahaha yeah try to post the whole code next time. that wouldve been a quick fix lol

Benny Wu
.a{fill-rule:evenodd;}techdegree
Benny Wu
Front End Web Development Techdegree Student 2,938 Points

Yeah it was confusing because I thought it occurred when I followed instructions for responsive.css so I thought that's where the problem was.

jerry bremser
jerry bremser
3,941 Points
jerry bremser
jerry bremser
3,941 Points

when floating and element it no longer lays in its containing box. which means the container will collapse. there is a clearfix that should put everything back in place while still floating rhe image.

try: .profile-photo:after { content: " "; display: table; clear: both;

}

if that doesnt do it, change the photo display to "block" and give it a max-width of about 150px, with margin, etc.

Benny Wu
.a{fill-rule:evenodd;}techdegree
Benny Wu
Front End Web Development Techdegree Student 2,938 Points

Hey Jerry! Thanks for your answer. I just noticed your post but I resolved the issue after reviewing my main.css coding. I had a typo under my <h3> tag where my font was written as "lem" instead of "1em" under the general styling. After changing that the white strip at the top had been filled with the green color that was missing earlier. :D