Marketo Guided Landing Page - CSS Issue | Community
Skip to main content
Ayan_Talukder
Ayan_Talukder
New Participant
December 5, 2017
Solved

Marketo Guided Landing Page - CSS Issue

  • December 5, 2017
  • 2 replies
  • 3857 views

Hi everyone,

I wanted to reach out to the community to see if I can get some advice on an issue I am facing with a Marketo Guided Landing page form. I've modified the CSS slightly for a simple registration page:

https://pages.esri.ca/WS-17DEC13-IDidntKnowYouCouldDoThat_WebinarLandingPageEN.html​

The form was centered but has suddenly "broke" without me editing the code. I've tried everything I thought would work, but it doesn't seem to be centering. Here is the CSS in the Marketo Guided Landing Page template:

<div class="col-md-6" style="margin: auto;">
<div class="mktoForm" id="WebinarForm" mktoName="Webinar Form" style="min-height:80px;"></div></div>

Thanks in advance for any advice!

Best answer by Mark_Price

Hi Ayan,

Since the page is bootstrap based, you can potentially use the mobile responsive helper classes:

<div class="col-md-6 col-md-offset-3 col-sm-12">
<div class="mktoForm" id="WebinarForm" mtkoName="Webinar Form" style="min-height:80px"></div>
</div>


This will center the div containing the form on Large, Medium devices and then set the div to full-width on small, x-small devices.

Hope it helps!

2 replies

Gerard_Donnell4
Gerard_Donnell4
New Participant
December 6, 2017

Hi @Ayan Talukder​,

Can you provide a screenshot of what you are seeing as it looks ok for me as well.

Thanks,

Gerard

    Ayan_Talukder
    Ayan_TalukderAuthor
    New Participant
    December 6, 2017

    Hi Gerrard thanks for your reply! The issue is now solved, it was my fault for not doing a hard refresh after adding the bit of code.

    M
    Mark_PriceAccepted solution
    New Participant
    December 5, 2017

    Hi Ayan,

    Since the page is bootstrap based, you can potentially use the mobile responsive helper classes:

    <div class="col-md-6 col-md-offset-3 col-sm-12">
    <div class="mktoForm" id="WebinarForm" mtkoName="Webinar Form" style="min-height:80px"></div>
    </div>


    This will center the div containing the form on Large, Medium devices and then set the div to full-width on small, x-small devices.

    Hope it helps!

      Ayan_Talukder
      Ayan_TalukderAuthor
      New Participant
      December 5, 2017

      Thank you for your reply Mark!

      I just gave it a shot but it still doesn't seem to be centering, very odd.

      Casey_Grimes2
      Casey_Grimes2
      New Participant
      December 5, 2017

      Hey Ayan,

      In this case, you need to remove the style="margin:auto" bit from your inline style; that's cancelling out Bootstrap's margin calculations.

        Terms & ConditionsAccessibility statement

        Loading footer...