Skip to main content

Hey everyone - how’s it going? 🙂


I am always trying to find new ways to do things along with new designs and concepts. I came across a pretty cool landing page the other day and I have tried to recreate it.


Link to my site


In this particular case I am trying to create a 1 sided scroll website - where the form stays in view on the right hand side and the left hand side of the page consists of information which you can scroll… - this part works fine.


Unfortunately, I am getting some errors:



  • my form isn’t showing up. It’s meant to be on the right hand side of the page, but literally isn’t there.

  • The scroll bar no longer appears (after tweaking code to make it work) but you can still scroll half of the page

  • Unbounce is meant to have default white background, but it’s all grey, as if there is no section (but there is)


Anyway, you can have a look at the website here


Any help would be greatly appreciated, I can post the code here if someone would like.


Thanks!

Hi @erayner,


A few months back I played around with the same idea but never got to implementing it on a live page.


Here is an example of what I put together and I think it closely matches what you are trying to achieve.


It’s just a rough concept. The black lines represent either the beginning or end of sections.


All it took is just a few lines of CSS:


<style>

  #lp-pom-box-13 {

   position:fixed;

   height:100%;

   width:320px; 

   top:0;

   left:20px; 

  }

</style>

This should get you going in the right direction.


Best,

Hristian

I had a different approach



.scroll-container{
height: 100%;
background-color: white;
}
.content{
padding: 50px 20px;
height: 100%;
overflow-y:scroll;
width: 90%;
}

#lp-code-9{
height: 100vh;
}

#lp-pom-block-15{
width: 100%;
}

I put a scroll box in an html code block using overflow-y: scroll.

But I will give yours a go now 🙂 Thanks!

This is a very unique layout! It would be interesting if you could hide it on mobile, as I’m assuming it wouldn’t provide the best usability experience on a mobile screen. But on desktop I could see this coming in handy!

Reply


Terms & ConditionsCookie settings