Help with padding

I’m having an issue with my spacing/padding in my Portfolio and Contact sections. There is A LOT of space above the words, I don’t like it. I can’t quite figure out how to reduce it. I have read through the BS documentation, googled, etc and I’m at a loss.
Could someone have a look and see if I am perhaps missing something? I would greatly appreciate it.

https://codepen.io/inkedblots/full/VXBMPY

Oh, please ignore the colors, they are horrible. I just wanted to see what I was working with :slight_smile:

Thank you!!

The tricky thing about issues like this is figuring out which element is causing the problem, so I’m going to answer your question by showing you how to Sherlock Holmes your way to the offending CSS.

The browser’s developer tools (‘devtools’) is your very best friend in the whole world. All browsers have some variation on this, but Chrome is the suggested browser for web development so I’m going to show you those tools specifically.

You can open devtools by hitting F12 with the appropriate browser tab active or by right-clicking on the problematic part of your page and selecting ‘Inspect’. You’ll be able to see the page’s html in the main window. Next what you’ll want to do is move your mouse over html elements and watch your page. The element that you’re hovered over will highlight. There are different colors indicating the padding, border, margin, and content. Look what I found on your page:

I’m guessing that the space you don’t like is now highlighted in orange. The culprit is jumbotron. Clicking on that html element (in devtools, not the window) will show all of its CSS in devtools, for further investigation. In this case, since you’re using Bootstrap and not changing jumbotron this is a red flag that you might not be using the Bootstrap component as intended. You can go through the process of overriding its styles if you like, but I suggest learning more about Bootstrap components (from their official documentation and/or tutorials and articles) and deciding if you really want to use jumbotron inside these divs.

2 Likes

Wow! Thank you so much. I completely forgot about the devtools. I will definitely dive deeper into the jumbotron and weigh my options.

I appreciate your help.