Topic: spacing issues - GenerateSupport

Sameer
April 11, 2026 at 5:01 pm

Greetings.

I notice spacing issues on homepage, both on desktop and mobile versions:

1) This is a single page homepage with anchors. However, when you click on the navigation items and the page scrolls down, the vertical spacing above the resulting headings is not consistent/equal. Some have too much white space above and the others end up almost hitting the navigation bar.

This is happening both on desktop as well as mobile.

2) There is too much white space above and below the footer.

Please help resolve these issues at your earliest convenience.

Thank you.

George

April 11, 2026 at 11:01 pm

Hello,

You have this CSS:

html {
    scroll-behavior: smooth;
    scroll-padding-top: 160px; 
}

Replace it with:

html {
    scroll-behavior: smooth;
    scroll-padding-top: 220px; 
}

Adjust the 220px offset to your liking.

For mobile, you have this CSS:

@media (max-width: 768px) {
    html {
        /* Increase this value until your titles clear the mobile nav perfectly */
        scroll-padding-top: 220px !important; 
			}
    h2 {
        margin-top: 5px !important; /* Reduces the giant gap on mobile */
    }
}

The following CSS:

 html {
        /* Increase this value until your titles clear the mobile nav perfectly */
        scroll-padding-top: 220px !important; 
			}

This will be the offset for mobile. If you want a different offset value for mobile, adjust this value accordingly. You don’t need the !important at the end. It’s a good practice not to use !important in CSS declaration and instead adjust the selector specificity. In this case, you don’t need it at all.

Sameer
April 12, 2026 at 11:53 am

Thanks. I adjusted the values but the issues persist.
I’m not sure if these values are actually doing anything.
Please see below and guide.
George
April 12, 2026 at 1:16 pm

They seem to be working, you just need to adjust them accordingly. Smaller values will bring the sections closer to the top. You would need to have consistent paddings on your sections so that the values will produce the same spacing for all the links.

Sameer

April 13, 2026 at 1:25 pm

Hi, I adjusted it as follows (160px) but the anchor headings get hidden behind the navgation:

/* MOBILE SCROLL OFFSET FIX */
@media (max-width: 768px) {
    html {
        /* Increase this value until your titles clear the mobile nav perfectly */
        scroll-padding-top: 160px; 
			}
    h2 {
        margin-top: 5px !important; /* Reduces the giant gap on mobile */
    }
}

Sameer
April 13, 2026 at 1:50 pm

Hi again, I can share the site login if it will help you investigate the inconsistent spacing behavior for different anchors on both desktop and mobile.
Sameer
April 13, 2026 at 3:01 pm

FYI, the homepage content is coming from an element hook.

Kindly assist at your earliest convenience.

Thank you so much.
Alvind
April 13, 2026 at 8:41 pm

Hi there,

You should add the anchor ID to the Heading/Headline block itself instead of attaching it to the Section Divider, which is how it’s currently set up.

The Section Divider currently has a top and bottom margin of 100px, which is what’s causing the excessive gap when the page jumps to that anchor section.
Sameer
April 14, 2026 at 6:27 am

Hi, thanks. Adding the anchor ID to the headings instead of attaching it to the Section Divider worked on desktop.

However, on mobile, the headings still hide behind the navigation.

Please advise what to do.

George

April 14, 2026 at 8:17 am

Hi,

It’s going to be difficult to calculate the right offset, since you have a sticky full menu. The menu will span multiple lines the smaller the screen is getting.

Try adding this CSS:

@media (max-width: 605px) {
    html {
        scroll-padding-top: 40px;
    }
}

@media (max-width: 326px) {
    html {
        scroll-padding-top: 40px;
    }
}

@media (max-width: 263px) {
    html {
        scroll-padding-top: 40px;
    }
}

Remove this CSS:

@media (max-width: 768px) {
    html {
        scroll-padding-top: 0;
    }
}

Sameer

April 14, 2026 at 9:40 am

Thanks. The following code seems to have fixed it:

/* MOBILE SCROLL OFFSET FIX - UPDATED */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 0; 
    }

    :target::before {
        content: "";
        display: block;
        height: 280px; 
        margin-top: -280px;
        visibility: hidden;
        pointer-events: none;
    }

    h2 {
        margin-top: 5px; 
    }
}

George
April 14, 2026 at 10:02 am

Great, good to know!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.