CSS help for submit button on mobile

Get Help
,
1

The CSS change for changing color and border radius for desktop worked fine:

body #gform_wrapper_1 .gform_footer input[type=submit] {
background-color:#ff0000;
color: #ffffff;
font-weight:600;
width:125px;
padding: 10px 10px 10px 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

But can’t get mobile to work - used the following:

@media only screen and (max-width: 767px) {
body #gform_wrapper_1 .gform_footer input[type=submit] {
background-color:#ff0000;
color: #ffffff;
font-weight:600;
width:125px;
padding: 10px 10px 10px 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
}

Any thoughts on what I’ve done wrong would be greatly appreciated.

Thanks,
JJ

2

Try adding some !important at the end of your css for your mobile breakpoints.

Background-color: #777777 !important;

You also may want to lower your max width to something like 480px because 768 is awfully close to tablet and in some cases it probably will match some tablet devices.

1 Like
3

Can you share the URL to a page on your site where we can test the form and see the CSS being applied? Thank you.

4

Thank you for that help, Dere.

5

It seemed to work. Thanks for the help, Chris.