Split Screen Css
-
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?
-
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 gridabout footers:
https://laytheme.com/documentation/footers.htmlcss:
#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; }
-
Thanks! This worked!
-
I created a tutorial for this:
https://laytheme.com/tutorials/create-a-splitscreen-website.html
-
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!
-
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
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. When using a WordPress Cache plugin, disable it or clear your cache.
Now see if your problem solved itself.
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
I don't answer or check forum DMs, please just post on the forum.