Resize Custom HTML element according to content

  • 17 May 2017
  • 7 replies
  • 334 views
P

Hello there,

I have a very long Custom HTML code with several DIV elements, iFrames, etc.

In the unbounce editor I have to set a fixed height to that Custom HTML element. But the thing is, every browser, device and setting presents the content different.

That means, sometimes the content is longer and sometimes it is shorter. If it’s too long for the set height - the content is cut at some point of the content. If it is too short for the set height - the content is there but I have a lot of white space underneath it. I tried to illustrate with a screenshot what I mean:

The black boxes are my content. the green line should be recognized as the end of my content. The red lines should illustrate that this should be removed automatically, because it is just blank. The red circle on the right side shows that there is a lot of blank content to scroll - which makes no sense at all.

My question: Is there any possibility to not set the height fixed but rather let it resize automatically according to the length of the content (until the green line)?

Thanks in advance!

Best ragards
Peter

7 replies

yokok21

We have the same situation. Did you find a way to solve this issue by any chance?

J

I would suggest reducing the height of the actual custom html element within the editor and adding overflow: visible to the element in the style sheet. This will allow for your page to be able to resize in any browser regardless of your editor stage height.

S

Hi

please give me solution how to set height auto of sections in unbounce ??

profitlabs

hey guys, this may or may not be a fix for resizing the html box according to your internal content.

  1. Add the html box
  2. in the bottom right there is an element meta data box > copy the element id

it looks like #lp-code-21

  1. Click on stylesheets tab at the bottom of the builder

  2. paste in the style code

#lp-code-21 {height:auto;}

***#lp-code-21 is the meta element id you should have copied in step 2

hope that helps

L

I have the same problem

Valorie

Looking for the answer too

digibomb
Userlevel 6
Badge +1

@profitlabs labs answered this.

Use the ID of the Custom HTML element and this to your css:

#lp-code-# {
          height: auto !important;
}

Works for me …

Reply


Terms & ConditionsCookie settings