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 trialTushar Singh
Courses Plus Student 8,692 PointsHow 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
Kai Nightmode
37,045 PointsFor 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!
Billy Bellchambers
21,689 PointsHi 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
Courses Plus Student 8,692 PointsOk 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.
Tushar Singh
Courses Plus Student 8,692 PointsTushar Singh
Courses Plus Student 8,692 PointsThanks 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?
Kai Nightmode
37,045 PointsKai Nightmode
37,045 PointsSure thing. ^_^
Looks like the other pages have DIVs with a class of
container
. Thosecontainer
classes specify 15 px padding on both sides which is probably why arow
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.