SOLVED

Need help with mobile view button alignment

Go to solution
Nichole_Trobar1
Level 3

http://info.stanjohnsonco.com/2015-ICSC-RECon-Vegas.html

Form looks great in desktop view, but when I switch to mobile if aligns to the right instead

Here is the style that is applying but I can't figure out how to turn it off - suggestions?

0EM50000000T3qX.png

 

Tags (1)
1 ACCEPTED SOLUTION
Casey_Grimes
Level 10
Hi Nichole,

Your problem is on line 309:
#bodyId .mktoForm .mktoButtonRow { display:block; text-align:right; }
To fix this, you simply need to have your desktop version of mktoButtonRow be text-align: left !important rather than left (or fix the mobile-specific error.)

View solution in original post

4 REPLIES 4
Justin_Cooperm2
Level 10
Much better to use CSS specificity to do this instead of using !important tags.

You could add the following anywhere to your page to fix it:
html #bodyId .mktoForm .mktoButtonRow { display:block; text-align:left; }
Nichole_Trobar1
Level 3
THANK YOU for all your help!!  Adding the important! to the custom CSS did the trick!
Casey_Grimes
Level 10
Hi Nichole,

Your problem is on line 309:
#bodyId .mktoForm .mktoButtonRow { display:block; text-align:right; }
To fix this, you simply need to have your desktop version of mktoButtonRow be text-align: left !important rather than left (or fix the mobile-specific error.)
Anonymous
Not applicable
It looks like there is Firefox-specific CSS pushing the submit button to the right.  Is this happening in any browser you view your mobile page in, just the Marketo preview window, or on an actual mobile device?

For starters, you might try adding custom CSS in your form editor to override the style="margin-left:17px;" on the button class. You'll probably have to add a !important tag to make it take to the form.  Good luck!