Home Forums Art WordPress Theme Remove scroll bar on a page with little content

This topic contains 7 replies, has 2 voices, and was last updated by  PeterX12 1 year, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #14639

    PeterX12
    Participant

    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

    #14645

    BWSM
    Keymaster

    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://www.uiueux.com/forums/topic/how-to-find-wordpress-postpage-id/

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #14651

    PeterX12
    Participant

    Hi,

    thanks a lot for your answer – it worked!!

    You’re a genius.

    Best,

    Max

    #14694

    PeterX12
    Participant

    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

    #14695

    BWSM
    Keymaster

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

    #14700

    PeterX12
    Participant

    Hi

    yes sure, here the URL:

    http://vynyze.com/

    Best,

    Max

    #14701

    BWSM
    Keymaster

    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;}
    #14712

    PeterX12
    Participant

    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

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

The topic ‘Remove scroll bar on a page with little content’ is closed to new replies.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!