Remove scroll bar on a page with little content

[PeterX12]

Hi,

I created an ABOUT page as well as a CONTACT page on my website. Both these pages have very little content on them. The ABOUT page only has about 5 lines of text and the CONTACT page has only a contact form. Still, there is a scroll bar on both pages, which is not necessary, since all the info on both pages sits above the fold. It’s a bit annoying, because when I scroll up, the text & the contact form cut into the header text. So that’s why I would like to remove the scroll bar. Is this possible?

Thanks a lot for your answer already in advance.

Best,

Max

[SeaTheme]

Hi,

please try to use the custom css(“Appearance > Customize : Additional CSS”):

.page-id-816 .wrap-all,
.page-id-819 .wrap-all { 
    height: 100vh;
}

The 816/819 are the pages id, you can change them as your about/contact pages id refer:https://seatheme.net/forums/topic/how-to-find-wordpress-postpage-id/

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[PeterX12]

Hi,

thanks a lot for your answer – it worked!!

You’re a genius.

Best,

Max

[PeterX12]

Hi,

it’s me again – I have a quick question regarding the above issue:

The CSS you provided did work, however now that the scroll bar on the ABOUT & CONTACT page is removed, the navigation menu “jumps” a bit to the right when I click from the MAIN page to the ABOUT & CONTACT page.

(Since the scroll bar is still there on the MAIN page, but not any more on the ABOUT & CONTACT page, I guess this means that the width of the pages is different, which I guess makes the navigation menu change position from one page to another)

Do you know what I can do so that the navigation menu stays in one place and doesn’t “jump” from left to right?

Best,

Max

[SeaTheme]

Please leave you page url, I need check, thanks!

[PeterX12]

Hi

yes sure, here the URL:

http://vynyze.com/

Best,

Max

[SeaTheme]

Please try to update the css as:

.page-id-2 .wrap-all, 
.page-id-85 .wrap-all {
    height: 100vh;   overflow-y: scroll;
}
@media (min-width: 768px) {
.page-id-2 #wrap, 
.page-id-85 #wrap {
    min-height: 100%; }
}
.page-id-2 #wrap, 
.page-id-85 #wrap { margin-top: 80px!important; }
.page-id-2 #footer,
.page-id-85 #footer { display: none;}

[PeterX12]

Hey thanks a lot for the CSS.

Unfortunately I didn’t really work though, with the CSS above some strange scroll bars appeared on the page.

But never mind, I managed to fix it myself, I used the following code:

.menu.clearfix {
margin-right: 15px;
}
.home .menu.clearfix {
margin-right: inherit;
}

Cheers,

Max

[Author]

Posts