Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points

How can I remove this white space -right side???

http://codepen.io/tushar_13/full/LNVvKV/

I know it's not perfect and I am literally violating the DRY concept, but I am working on it.

But, I have 2 problems at this point. 1) right side...white space....how can I remove it?? 2) How can I add back to top glyphicon at the bottom right of contact page??should I use position: absolute??

Healthy criticism is most welcome, I am trying hard but position property and :before and :after pseudo elements are still not clear?? What should I do?

3 Answers

For the horizontal scrolling issue / right side white space.

Found the issue using the Chrome inspector when poking the DIV with a class of row inside the DIV with a class of page-2.

<div class="page-2">
    <div class="row" id="about-me">
    ...

The particular CSS that is causing the issue is...

.row {
    margin-right: -15px; /* this is the exact culprit */
    margin-left: -15px;
}

There are multiple solutions but one of the easier fixes would be to add the following CSS.

.page-2 {
    overflow: hidden;
}

Cheers!

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Thanks a lot... But I din't actually used that .row class...Is it the part of a bootstrap row class..i mean those negative margins?? If it is...How come my other pages were fine, not a problem there....why particularly this About section?

Sure thing. ^_^

Looks like the other pages have DIVs with a class of container. Those container classes specify 15 px padding on both sides which is probably why a row class trying to use negative margins of 15px is contained by them.

Oh and the about page section is the only section without a container DIV compared to the others.

Billy Bellchambers
Billy Bellchambers
21,689 Points

Hi there,

I've had a look at your site and am struggling to see the white space you have mentioned. If your referring to the background image towards the top of the page the white space there is part of the image. You could crop the image down to remove the white space if this is the issue.

As for the return to top button in contact page. Absolute positioning would work but you could also create your <a> element to be the width of the page and align the text to the right this will prevent content overlapping the link to the left also. Depends on the result you require.

Hope this helps.

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points

Ok be a harsh critic now!!

Tell me what I did wrong and what I need to learn??? I am a newbie(mechanical engg.) no background of coding and can use some help.