Split Screen site but split 20/80, not 50/50
-
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 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... :/ -
so.. i need a link to your website where u experience the issue
-
@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!
-
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; }
I don't answer or check forum DMs, please just post on the forum.
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it