Help with in-page links scrolling too far, and an annoying blank spot at a certain width

1

I’m trying to tidy up my Technical Documentation page, and I’m having trouble getting my in-page links to not scroll too far when the nav bar is at the top (below 650px width). I’ve set my main body to be 90%, and my header with the nav bar to be 10%, but the links bring the element they are linked to to the top of the page, behind my header.

There is also an annoying blank space between my header/navbar and my main body, but only between the widths of 650px-585px. I don’t know why this would happen when they are set to 10% and 90% heights respectively. Any help is appreciated.

https://codepen.io/afminick/pen/RmogJW?editors=1100

2

One important point: LEARN TO USE CHROME DEVELOPER TOOLS TO HELP YOU DEBUG YOUR CSS

Remove height of 90% for main and try the code I pasted.

main {
    margin-left: 0;
    padding: 40px 0;
    width: 100%;
  }

.main-section{
    padding-top: 12%;
  }
1 Like
3

Top padding on the sections is one way, you can also give some negative margin to pull them back up again if you don’t want the extra space.

Here is another way using a transparent top border and negative margin.

.main-section {
  border-top: 100px solid transparent;
  margin-top: -50px;
}

Side note: You page is very hard to read, the green text color on a blue background does not have good contrast. Also, the font size is too small.

4

Thank you, that worked like a charm. I also opened CDT. It seems very useful, and very daunting for me right now. Not being one to shy away from a challenge I will find some tutorials on it since I’m sure it will save me a lot of time, and up the quality of my coding in the future.

Cheers!

5

Thank you, I changed the colors to have a little more contrast, and adjusted the font sizes. The nav bar adjusts in a slightly strange way as the width goes from 650 to 450, and I stopped trying to compensate for narrower than that. If you have time, let me know if the new colors and sizes are better.

Thanks again!

6

Well, the contrast is better but I’m not a fan of the colors.

Try using an online color tool like https://coolors.co see if you can’t find a palette you like. You can also use an image to pick colors from. Do a search for the game and look at some images. The coolors site can auto-generate colors from images, go to Generate and then click the camera icon from the toolbar.

Here is a quick random color selection I got from an image.

BG
#415472 (blue) or #00443C (green)

Headers
#da3b1d (red)

Paragraphs
#eaeaea (white)
1 Like
7

Wow, I love that website! Thank you very much! I may still have picked a color scheme you (and many) wouldn’t prefer, but at least picking them has a bit more rhyme and reason, and being able to pick from an image is amazing!

I love all of the tools I am shown through this community. You’ve given me help that I will use for the rest of my webdev life. Thank you =)

8

I’m so glad this helped. CDT can be tricky. If you encounter any issue, we all are here to help :wink: @afminick