Attention: The Marketo Community will undergo scheduled maintenance on Tuesday, August 20th between 10-11 PM PDT. During this time, the Community and its content will not be accessible. We apologize for any inconvenience this may cause.
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;
}
Solved! Go to 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.
Hi Alyssa,
Can you please edit your original post to use the Syntax Highlighter for your code to make it easier to read?
Just did that!
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.
That was the issue! Thank you