SOLVED

Marketo Guided Landing Page - CSS Issue

Go to solution
Ayan_Talukder
Level 5

Marketo Guided Landing Page - CSS Issue

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!

1 ACCEPTED SOLUTION

Accepted Solutions
Mark_Price
Level 7

Re: Marketo Guided Landing Page - CSS Issue

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!

View solution in original post

8 REPLIES 8
Mark_Price
Level 7

Re: Marketo Guided Landing Page - CSS Issue

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
Level 5

Re: Marketo Guided Landing Page - CSS Issue

Thank you for your reply Mark!

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

Casey_Grimes
Level 10

Re: Marketo Guided Landing Page - CSS Issue

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.

Ayan_Talukder
Level 5

Re: Marketo Guided Landing Page - CSS Issue

Thanks for your reply Courtney! I had removed it but didn't have any luck .

Mark_Price
Level 7

Re: Marketo Guided Landing Page - CSS Issue

Hi Ayan,

It looks like it's working for me so maybe you have a cached page.  Try in a FF private window or hard refresh maybe?

pocx5K2IaU.gif

Ayan_Talukder
Level 5

Re: Marketo Guided Landing Page - CSS Issue

Thank you and Courtney Grimes you guys both helped me greatly. It was definitely a cache issue, such a newb mistake I didn't think about that. Thank you both again and Mark for taking the time for making a screen capture!

Gerard_Donnell4
Level 10

Re: Marketo Guided Landing Page - CSS Issue

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
Level 5

Re: Marketo Guided Landing Page - CSS Issue

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.