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
Learning coding
Front End Web Development Techdegree Student 9,937 PointsWhy does the "Buteyko training" page appear half and not fully after clicking the button?
Half of the page "Buteyko training" appears and the other half is from the previous page. (the Symptoms page)
I tried margin-top and padding-top with a negative value but that doesn't solve it. Why isn't it working and what do I have to do to make it work?
My workspace is: https://w.trhou.se/vgunh3n0iy
5 Answers
Alex Watts
8,396 PointsHello again,
I have had a more detailed look at your code and... it's a bit messy. The framework Bootstrap can be hard to grasp because it has so many preset features like the navigation and grid system. I honestly suggest that you re-start this project from scratch. There is the Bootstrap documentation - http://getbootstrap.com/css/ - so that you can see all the CSS features. Within your code you have got some HTML in your main.css file, which should definitely not be there! Also you have missed quite a few closing tags in your HTML which will cause some serious problems. There are a lot of issues, but starting from scratch and reading the documentation will really help!
The code I posted can go in the main.css file at the top. Your first block of code is called a media query and should be placed at the bottom of your CSS file. It should also be written as follows (see below):
@media (min-width: 576px) {
.jumbotron {
padding-bottom: -80px;
}
}
Hope this helps! If you have any questions on Bootstrap feel free to ask :)
Alex Watts
8,396 PointsHello,
Firstly you have got to consider the height of your navigation. You can find its height in your console. As the total height of your navigation is 114.59px you should apply a margin top to your id="home" (see below):
#home {
margin-top: 114.59px;
}
This occurs because your navigation is set to fixed, which takes the element out of the normal flow of the document, causing the other elements on the page to ignore it completely. Hence why the other content just flows underneath it to the top of the page.
Hope this helps!
Learning coding
Front End Web Development Techdegree Student 9,937 PointsI think I apllied your code wrong. How / where do I have to implemement the code you posted? I did it by writing the code you posted into main.css. Then I made an id="home" above the text from the page "Buteyko training" in index.html. (wich didn't make sense to me) The margin is applied in the homepage now. You can see it here https://w.trhou.se/oosm7iv4lc
Learning coding
Front End Web Development Techdegree Student 9,937 PointsNo problem, I will start over with some adjustments. Thanks
Alex Watts
8,396 PointsThat's alright! Your website looks great you just need those changes in your code.
Good luck :)
Learning coding
Front End Web Development Techdegree Student 9,937 PointsThe website is going to be awesome :D Good day!