SOLVED

Re: Form button is centered in preview, but not on external landing page

Go to solution
Sarah_Brizendin
Level 1

Form button is centered in preview, but not on external landing page

I am having some issues with styling my form, specifically getting the form button to be centered. It shows up centered on the Marketo preview, but when I place it on my Unbounce landing page it shows up as off-center. It's driving me crazy! I've tried every trick that I could find online with no success.

URL: https://resource.guildeducation.com/form-test/ 

CSS:

/* Add your custom CSS below */
html body {
background-color: rgba(6,51,72,1);
}
.mktoForm {
margin: auto;
}
input {
min-width: 352px;
height: 33px;
margin-bottom: 5px !important;
margin-left: auto !important;
margin-right: auto !important;
}
select {
min-width: 352px;
height: 33px;
margin-left: auto !important;
margin-right: auto !important;
}
label {
width: auto !important;
margin-bottom: 4px !important;
color: #fff;
}
.mktoButtonRow {
width: 100%;
}
.mktoFormRow {
width: 100%;
}
.mktoButtonWrap {
margin-left: auto !important;
margin-right: auto !important;
width: 100%
}
.mktoButton {
margin-left: auto !important;
margin-right: auto !important;
margin-top: 10px !important;
font-weight: bolder !important;
display: flex;
justify-content: center;
border-radius: 75px;
border-color: rgba(0,156,168,1) !important;
width: 326px;
height: 40px;
background-color: rgba(0,156,168,1) !important;
background-image: none !important;
color: #ffffff;
text-shadow: none !important;
font-size: 18px !important;
}
.mktoOffset {
width: 0 !important;
}

.mktoForm .mktoAsterix {
color: #FFFFFF !important;
}
1 ACCEPTED SOLUTION

Accepted Solutions
Grace_Brebner3
Level 10

Re: Form button is centered in preview, but not on external landing page

Hi Sarah,

Firstly - it's helpful to others in community if you paste your code in using the syntax highlighter, it makes it much easier to read (Advanced Editor > More > Syntax Highlighter).

If you inspect your code you'll notice that the button left & right margins are set to auto. That's effectively resulting in the margins being set to ensure that the button is centered relative to the width of the form. So - in technical fact, your button is centered: the root issue here is that much of your form is set to fixed widths and is not responsive - this is what you'll want to fix. Here's a good resource to show some of the CSS you'll need to implement here: https://jennamolby.com/how-to-create-responsive-marketo-forms/ 

Hope that helps.

View solution in original post

4 REPLIES 4
Josh_Pickles
Level 7

Re: Form button is centered in preview, but not on external landing page

Hi Alyssa,

Can you please edit your original post to use the Syntax Highlighter for your code to make it easier to read?

Sarah_Brizendin
Level 1

Re: Form button is centered in preview, but not on external landing page

Just did that!

Grace_Brebner3
Level 10

Re: Form button is centered in preview, but not on external landing page

Hi Sarah,

Firstly - it's helpful to others in community if you paste your code in using the syntax highlighter, it makes it much easier to read (Advanced Editor > More > Syntax Highlighter).

If you inspect your code you'll notice that the button left & right margins are set to auto. That's effectively resulting in the margins being set to ensure that the button is centered relative to the width of the form. So - in technical fact, your button is centered: the root issue here is that much of your form is set to fixed widths and is not responsive - this is what you'll want to fix. Here's a good resource to show some of the CSS you'll need to implement here: https://jennamolby.com/how-to-create-responsive-marketo-forms/ 

Hope that helps.

Sarah_Brizendin
Level 1

Re: Form button is centered in preview, but not on external landing page

That was the issue! Thank you