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

[Sarah_Brizendin]

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;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Josh_Pickles]

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]

Just did that!

[Grace_Brebner3 · Accepted solution]

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]

That was the issue! Thank you