Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Split Screen Css

Split Screen Css

Scheduled Pinned Locked Moved General Discussion
6 Posts 3 Posters 145 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    PebmacStudio
    wrote on last edited by
    #1

    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?

    1 Reply Last reply
    0
    • arminunruhA Online
      arminunruhA Online
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      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;
      }
      
      1 Reply Last reply
      0
      • P Offline
        P Offline
        PebmacStudio
        wrote on last edited by
        #3

        Thanks! This worked!

        1 Reply Last reply
        0
        • arminunruhA Online
          arminunruhA Online
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          I created a tutorial for this:

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

          I 1 Reply Last reply
          0
          • arminunruhA arminunruh

            I created a tutorial for this:

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

            I Offline
            I Offline
            igawu
            wrote on last edited by
            #5

            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!

            1 Reply Last reply
            0
            • arminunruhA Online
              arminunruhA Online
              arminunruh
              Global Moderator
              wrote on last edited by
              #6

              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

              1 Reply Last reply
              0
              Reply
              • Reply as topic
              Log in to reply
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes


              I also code custom websites or custom Lay features.
              šŸ’æ Email me here: šŸ’æ
              info@laytheme.com

              Before you post:
              1. When using a WordPress Cache plugin, disable it or clear your cache.
              2. Update Lay Theme and all Lay Theme Addons
              3. Disable all Plugins
              4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

              This often solves issues you might run into

              When you post:
              1. Post a link to where the problem is
              2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
              3. If the problem is difficult to explain, post screenshots / link to a video to explain it
              Online Users
              reinterpretR
              reinterpret
              arminunruhA
              arminunruh
              J
              joackim
              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
              laytheme.com
              • Login

              • Don't have an account? Register

              • Login or register to search.
              • First post
                Last post
              0
              • Recent
              • Tags
              • Popular
              • Users
              • Search