Splitscreen website for mobile

[Max.Weinland]

Hello, despite @Armin-Unruh not recommending split screen websites for mobile, I am working on one and I think it’s exactly right for what I am trying to achieve. Except it doesn’t seem to work as far as I see it. As soon as the breakpoint for mobile is reached, the right side content (start page) is displayed above the left side content (footer). For desktop, I have set the scrollable columns to a quarter of the total window width each. For the mobile version, I want each column to make up half the window width. That part works. Just the stacking instead of parallel scrollability is a problem. How do I fix this?
Much love,
Max

The page is:
https://formfollowscapital.net/

[arminunruh]

i see youre using a custom phone grid.

make sure the css for the splitscreen website is in "custom css for desktop version".
so basically, make sure the css that currently works for you is not in the "custom css" field, but make sure its in "custom css for desktop".

then, add this in "custom css for phone version":

body>.lay-content #custom-phone-grid,
body>.lay-content #footer-region {
    height: 100%;
    position: fixed;
    top: 0;
    overflow-y: scroll;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
body>.lay-content #footer-region {
    left: 0;
    width: 50%;
}
body>.lay-content #footer{
    box-sizing: border-box;
    min-height: 100%;
}
body>.lay-content #custom-phone-grid {
    right: 0;
    width: 50%;
    box-sizing: border-box;
}
::-webkit-scrollbar {
    display: none;
}

basically its the same css as for the desktop version, but since you're using a custom phone grid layout, were using #custom-phone-grid instead of #grid