how to tackle this half/half look
-
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
-
arminunruh Global Moderatorwrote on Feb 21, 2025, 3:43 PM last edited by arminunruh Feb 21, 2025, 10:44 AM
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 idfor class enter:
fixedrowEnter 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. -
that worked so smooth and was so easy!! Thank you so much, I really appreciate it!!
3/3
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- 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:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it