Skip to main content

Hi folks - I’m having a small issue…my guess is that some CSS can fix it, but I’m not sure exactly what to do. Here’s my situation: I’d like to have the top div automatically adjust to fill up the entire screen (ex: firstround.com). I’ve gotten that to work and the other divs automatically adjust relative to the first div’s new height. However, the actual content (


and ) don’t adjust and stay in exactly the same position as before. This causes some content to be overlapping with the first div (it should be fully below the fold in the second div at this point). I’ve included the CSS I used below to get the first div to be 100% height regardless of user’s screen size.


html, body.lp-pom-body, div#lp-pom-root.lp-element.lp-pom-root, div#lp-pom-block-8 {    height: 100%;

    display: block;

    overflow: auto;

  }


Any help would be greatly appreciated! Thank you!

Hey Joe


This type of feature isn’t easy to do on a Unbounce page with the way we structure elements on the page. Reason being is that the elements that appear to be within a section/div are not actually child elements. Instead they are on a similar layer and find their positioning from the top of the page.


This means when a section is hidden or adjusted in positioning/size, the other elements on the page have no idea this happened and stay fixed to their original position.


The only way I can see this working is with javascript where you update the position of all elements on the page based on the new height of the div. 


I don’t have much more tips on how to do this, but hopefully this helps establish any limitations or issues you may run into.

Any updates on this please?

Hi @Raj_Valli,


The Unbounce builder still puts together the page as described by Johnny.


The only work around is to have a JS script that would adjust the positioning of the elements. However this solution requires some advanced knowledge of JS and Unbounce.


My company has done similar projects for clients in the past.


Just to point you in the right direction:




  1. You need to be able to “associate” the content with each section.




  2. Upon page load, you need to adjust the height of the header/main section. Based off on that adjustment, you need to move everything below the header section.




Best,

Hristian

Thanks Hristian. Are you able to share any additional details on the javascript or an easier way to associate the content to each section? I am comfortable in working with javascripts. Appreciate any help you can provide.


Also - if we want to work with your company to get custom unbounce pages done, where do I reach you?

Hi @Raj_Valli,


The trick we use is to add a box to each section that essentially has the same width and height of the section.

This way all content in a particular section is nested within that box.


The box has no border, color, etc., but it does help you when you write a script that would pick up any content within it and move it accordingly.


If you want to get in touch just sent me a direct message through the community here.


Best,

Hristian

Hi all,


it looks like that a decent solution isn´t available after 3 years, right? I am bit shocked to see, that Unbounce is positioning each element via top: XXpx; and not creating/nesting child elements. I´ve never seen such a concept.


Is there any chance, that Unbounce will update it´s base code?


Besides this it´s very irritating to see, that Page Builder is using absolute values, instead of relative ones like EM, etc. A switch would be very handy especially when you think of good responsive design.


Best

/Marco

Any updates?

@Johnny_Opao @Jonathan @Jess

Reply


Terms & ConditionsCookie settings