landing page :: adding html blocks : div elements spanning multiple html widgets

[Anonymous]

Hi,

I have a landing page which the template is finished and I want to edit the LP to add some widgets to grab content from the token and a form.

I want to add a CTA at the bottom of the screen that will stretch 100% across the screen but when I add the class to create the blue container, it only stretches to the size of the container (say 60-80% of the screen).

When I add the HTML widget, I added a couple of divs that would be closed in a later HTML widget. For whatever reason, Marketo is not closing the divs as expected.

e.g.

HTML 1

FORM 1

HTML 2

HTML 1:

<div class="body-copy">

  <div class="body-section">

    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12" id="extra-pad">

      {{text-copy}}

    </div>

    <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">

        <div class="form-container">

HTML 2:

        </div>

     </div>

</div><!--section-->

</div><!--body copy-->

<div class="clearfix"></div>

<div class="row">

  <div class="container">

    <div class="bg-blue">

      {{my.section-two}}

    </div>

  </div>

</div>

This does not work.

I am using bootstrap as well, viewing the approved page yields a broken layout. The code shows that the form container was closed without adding the form.

<div class="form-container">

</div>

any guidance is appreciated. I also looked at the link below but wasn't helpful

Thanks!

Adding Custom HTML to a Free-form Landing Page - Marketo Docs - Product Docs

[Grégoire_Miche2]

Hi Thanh,

Trying to add some responsive code to a free form landing page is very unlikely to work. Either you use free-form LP templates and you stick to what the can do (absolute positioning and a mobile version of the page) or you move to guided landing page templates and you will have full latitude for responsive design, although some features are still missing, including the capacity to add an HTML block (see )

-Greg

[Alok_Ramsisaria]

Hi Thanh,

The reason marketo is not closing the divs as you expect it to be, is because marketo's free form landing page template development is not made to create responsive bootstrap enabled landing pages. As a result of this, the elements that you drag and drop in the draft of the landing page are positioned absolute, and there is a method( or you can say a hack) called 'double div' method. Here's the link to it: Marketo Responsive Method: Marketo DoubleDiv | Edward Unthank | YeslerEdward Unthank

This method disables the absolute positioning of those dragable elements, and your content is positioned as you want it to be.

Recently marketo had released another way of developing responsive landing page templates without much hassle. Its called the 'Guided Form'. Here's the documentation of it: Guided Mode (Easy) - Marketo Docs - Product Docs​ Try switching to this editor because in this editor you do not need any hacks or way-around. Your bootstrap coding will work perfectly in it.

Also, regarding with the container not streching to 100%, could you please specify the parent container's stylings in the code of the template?

I hope this solves your problem.