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. how to tackle this half/half look

how to tackle this half/half look

Scheduled Pinned Locked Moved General Discussion
3 Posts 2 Posters 49 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.
  • C Offline
    C Offline
    chaosagent
    wrote on last edited by
    #1

    Hi,

    I am very (very!) new to this, so apologies if the answer is painfully simple and I'm missing 90% of the lingo

    Maybe you can direct me a bit which way would be best to approach this.
    I am trying to achieve something where the right half of the page is a full bleed image, and the left half is scrolling text. I want the image to be different on each page. I've tried:

    -set a sticky image and use browser height as row height. This is what it's currently set to here, but it doesnโ€˜t adjust responsively to always fill the right half completely:
    http://friedrich-praxis.de/sample-page/
    I'm assuming tweaking the css class of that image would fix it, but how?

    -I've tried the cover feature, but I don't want the image to disappear. Is the a way to make the overlaying parts transparent?

    -The whole split website thing seems a bit overkill when I only want the right half to be an image, but is that the way to go?

    Thanks in advance

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

      ok!

      on a new page, in the gridder set frame top to 0

      create an empty row at the top.
      right click โ†’ set right row image background (set your image here)
      right click the row โ†’ use browser height for row height
      right click the row โ†’ set html class and id

      for class enter:
      fixedrow

      Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop":

      .fixedrow{
          position: fixed;
          width: 100%;
          top 0;
          left: 0;
          pointer-events: none;
      }
      

      now create as many rows as you like below this row with texts on the left half.
      the very first text, right click it, set a space top.

      1 Reply Last reply
      1
      • C Offline
        C Offline
        chaosagent
        wrote on last edited by
        #3

        that worked so smooth and was so easy!! Thank you so much, I really appreciate it!!

        1 Reply Last reply
        1
        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
        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