Marketo Guided Landing Page - CSS Issue | Community
Skip to main content
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
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
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.

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
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
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.