Split Screen site but split 20/80, not 50/50

[fergtig]

Hi there,

I am creating a site inspired by www.eatock.com

However, the custom code Laytheme provides for the 'Split Screen' website splits the screen directly in half, where I would like the left portion to take up a smaller area of the screen around 20%

I tried playing around with the custom CSS, but when I got the portion to move over, the right side of the screen was not scrollable unless the cursor was on the very far right side

Any help would be much appreciated, thanks
F

[fergtig]

@fergtig Also - when i do exactly as instructed on the tutorial, there is a difference from the example website https://hedixandt.com/

on his site, when clicked into a project, moving the cursor onto to the right half will cause the hover over feature to disable, so you can scroll through that project,
When I did it, the hover over feature still works even once you've clicked into a project, the images block the project on the right side of the screen even when the cursor is over on that side... :/

[arminunruh]

so.. i need a link to your website where u experience the issue

[danoR]

@arminunruh any solutions for this problem? I’d love to split the screen in other proportions as well, but have the same issue as mentioned above. Thanks in advance!

[arminunruh]

do you have a link?

i think you can just do:

#grid, #footer-region {
        height: 100%;
        position: fixed;
        top: 0;
        overflow-y: scroll;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #footer-region {
width: 20%;
        left: 0;
    }
    #grid {
width: 80%;
        right: 0;
    }
    ::-webkit-scrollbar {
        display: none;
    }

or:

#grid, #footer-region {
        height: 100%;
        position: fixed;
        top: 0;
        overflow-y: scroll;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #footer-region {
width: 300px;
        left: 0;
    }
    #grid {
width: calc(100% - 300px);
        right: 0;
    }
    ::-webkit-scrollbar {
        display: none;
    }