AnsweredAssumed Answered

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

Question asked by Sarah Brizendine on Oct 28, 2019
Latest reply on Oct 28, 2019 by Sarah Brizendine

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

Outcomes