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 PointsHow can I remove a bit of the height from the Jumbotron header?
I tried differtent things, but now i am just gazing at the screen.
http://port-80-fejk6yu562.treehouse-app.com/index.html#
https://teamtreehouse.com/workspaces/22998992#
Help please!
13 Answers
Eric Gold
Front End Web Development Techdegree Graduate 27,401 Pointsit looks like your .jumbotron has two properties affecting the bottom spacing you're talking about. There's a margin-bottom of 2rem and a padding-bottom of 4rem. The padding-bottom is defined in a media query.
I see that you've tried to set padding-bottom to -40px on the .jumbotron class, but the developer tools says this is an "invalid property value" so it's ignoring it.
I think media queries will override the basic rules when screen sizes meet the mq's criteria. So if you want to change the styles defined by bootstrap's media query, I think you'll need to write another one, something like:
@media (min-width: 576px) {
.jumbotron {
padding-bottom: 0; // or whatever you want the value to be, such as 1rem.
}
}
Hope that helps! I still couldn't use the most recent link you provided, so I'm just going off the link from your original post. I still can't see your Workspace, but I can see the page you're working on using http://port-80-fejk6yu562.treehouse-app.com/index.html#
This is still kind of a guess, since I can't see all the files you're working with. I'm not enough of an expert to give great advice in this situation, unfortunately :)
Eric Gold
Front End Web Development Techdegree Graduate 27,401 PointsI can't see your workspace, but maybe you could reduce the top padding of the h1. It seems to have quite a bit. Or you could reduce its font size, if that's more what you had in mind.
Learning coding
Front End Web Development Techdegree Student 9,937 PointsYes, that worked! Thanks. :) I would also like to remove some space at the bottom of the header. Is that possible?
Eric Gold
Front End Web Development Techdegree Graduate 27,401 PointsYou could reduce or remove the header's bottom margin (although it is not too large right now). You also seem to have a <br> tag in there that may be creating some of the extra space. I would recommend experimenting with removing that unless you need it for a specific reason.
Eric Gold
Front End Web Development Techdegree Graduate 27,401 PointsWhenever you encounter spacing issues like this, the developer tools are a great help. If you haven't delved into them too much, I think you will really find them useful. For things like this, you can highlight each element on your page individually and see color-coded boxes representing the margin and padding of that element. Then you'll know where the spaces are coming from, which is the first step to changing them.
How to access and use them depends on your browser, but here's a guide for Chrome https://developer.chrome.com/devtools. For this kind of question, you'd just need the Elements tab. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
Learning coding
Front End Web Development Techdegree Student 9,937 PointsI reduced the margin with .jumbotron { margin-top: -30px; } Yeah i looked into developers tools. Only I mostly don't know yet how to interpret it, or what actions to take and how. Thanks for the links, I will delve into them.
Learning coding
Front End Web Development Techdegree Student 9,937 PointsHi Eric, I took some more time to look at developer tools and it's really easy. The weird thing is that I can change padding-bottom in dev tools, but when I do that in my code in workspace it stays the same.
This is my html code
<div class="jumbotron jumbotron-fluid bg-info" id="jumbotronics">
<div class="container-fluid navbar-header">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
</div>
And css (as far I think it's relevant)
bs-example-navbar-collapse-1 {
margin-top: -5px; }
logo {
margin-left: 680px; display: inline-block; }
jumbotronics {
margin-bottom: -5px; }
h1 { padding-top: 100px; text-align: center; }
.tekst { padding-left: 10px; }
.jumbotron { margin-top: -50px; border-bottom: solid lightgreen; padding-bottom: 30px; }
http://port-80-fejk6yu562.treehouse-app.com/
Hope you can help, I am stuck here!
Eric Gold
Front End Web Development Techdegree Graduate 27,401 Pointswith your first css rule, are you targeting an id? If so, you'll need to put # in front of your selector. I may be misunderstanding your problem, though.
Learning coding
Front End Web Development Techdegree Student 9,937 PointsYes, putting # in front of it doesn't work either. In dev-tools i I saw that the bottom padding is 64 px. You can see this part of treehouse right? http://port-80-fejk6yu562.treehouse-app.com/#symptomen
So this is what I tried:
adding style= "padding-bottom: -20%" adding style= "padding-bottom: -20px" Target Jumbotron in css with .jumbotron { paddding-bottom: -20px; } made an id selector with the name jumbotronics #jumbotronics { padding-bottom: -20px; }
My html and css changed a bit today. I can post them if needed.
Eric Gold
Front End Web Development Techdegree Graduate 27,401 PointsUnfortunately it doesn't look like I can see Workspaces. Hmm, I'm a little confused about what you're asking, but are do you have padding-bottom rules on the same element via both a class and an id? If so I believe only the id ones would apply. It wouldn't be cumulative, if that makes sense. At least I don't think so.
Learning coding
Front End Web Development Techdegree Student 9,937 PointsMaybe I didn't ask the right question, because I think you woud know then. My question is how to remove the padding of the header. In this case I have a jumbotron header. Now I want to reduce the header by removing part of the bottom padding from the header.
I removed the id and placed style="padding-bottom: -10% as internal css in the jumbotron code. <!-- jumbotron --> <div class="jumbotron jumbotron-fluid bg-info text-white" style="padding-bottom: -15%> <div class="container text-sm-center pt-3"> <h1 class="display-3">Online Buteyko adem training</h1><a href="index.html"id="logo"> <img class="Profile_photo" src="img/Logo.jpg" alt="Logo"> </a> </div> </div> <!-- /jumbotron -->
There is still padding and I can't get it away yet. Here is my workspace https://w.trhou.se/9cm30k8kg8, No you can check out the codes as well in the index.html. Thanks for so far, hope you have the answer.
Eric Gold
Front End Web Development Techdegree Graduate 27,401 PointsI don't see anything when I open the workspace link. Maybe it has to be active at the time? I'm not sure about that.
Without seeing all the code it's hard to answer...at least for me :)
One thing you might do is use the Computed tab when looking at styles in the developer tools (on Chrome this is on the far right of the dev tools when you're on Element; the first tab is Styles but then there's Computed.) This area can give you some clues not just about what styles are being applied, but where they are coming from. And since CSS cascades, you need to make sure any adjustments you make have priority over the existing rule.
However, I believe inline styles (in the html) would override both Bootstrap and your own stylesheet.
If you can find out if there's a way to share the entire Workspace, I would be happy to take a look at it.
Learning coding
Front End Web Development Techdegree Student 9,937 PointsNow I think you can see my codes https://w.trhou.se/1h9xpkyn5h Yes i think it has to do with cascading that padding-bottom doesn't work yet. The theory of cascading is clear, now some practice about that as well. Looking forward to your answer.
Learning coding
Front End Web Development Techdegree Student 9,937 PointsThat's ok, although I didn't get the answer your answers helped me keep in the process of learning. With your code the jumbotron height isn't reduced, but my solution for now is that I used linear gradients and then I can move the text a bit upwards. Your answers raise new questions, but I think that I am delving to deep then for my knowledge and expererience. Thanks again for taking the time and effort!