Question

I have a site: http://starthumble.com/

The menu does a scroll-to-anchor effect on the same page. However, if you click “home” it scrolls and cuts half of the call-out text off. I’ve figured out that if I set

.companycallout h1 {
    line-height: 5em;
}

Then it scrolls properly. The only issue is that the h2 tag gets pushed way down. The only way I can find how to fix it is

.companycallout h1 {
    line-height: 5em;
}
.companycallout h2 {
    margin-top: -90px;
    padding-bottom: 50px;
}

Is this the best solution? Is there any better options? I haven’t tested this cross browser yet (don’t have access to it at the moment) so I’m not sure if it’s compatible across the board or not.

Thanks!

Answer 1

Just change your margin-top to padding top

body {
    margin: 0;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: white;
    padding-top: 80px;}