Split Screen Css

[PebmacStudio]

Hi All,

I'm trying to achieve the split screen effect in Laytheme but I can't really make it work. I've searched for some topics on here that explained a little bit about this but this wasn't very helpful. So.. I'm trying again for everybody that wants to achieve this aswel.

How can I achieve this effect:
https://certainlynot.com/

I've tried the box and wrap method within CSS, but it doesn't seem to work.

Anyone has tips or tricks?

[arminunruh]

i see

so hedi xandt made this work with custom css:
https://hedixandt.com/

basically you use the footer for the left half and in there are all of the links
and for the right half you use the normal grid

about footers:
https://laytheme.com/documentation/footers.html

css:

#grid {
    width: 50%;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    overflow-y: scroll;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}
#footer-region {
    width: 50%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: scroll;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}
.lay-content {
    min-height: 100vh;
}

[PebmacStudio]

Thanks! This worked!

[arminunruh]

I created a tutorial for this:

https://laytheme.com/tutorials/create-a-splitscreen-website.html

[igawu]

Hi @arminunruh
What do you mean by "normal grid"?
How the projects appear connected to the links? How should I make "the normal" page to have a possibility to switch between the projects and scroll the chosen ones?

I don't know how to connect the projects to the links to make them appear on one side.

Thank you!

[arminunruh]

please read the tutorial i linked here

https://laytheme.com/tutorials/create-a-splitscreen-website.html

the footer region is on the left. it includes the links.
the "normal grid" is the one on the right, where the content is shown