Responsive button for Gravity Forms

Question

I recently started using Gravity Forms for my wordpress-based site. I did some basic styling of my forms and it seems to work great on a desktop browser. On a mobile device, the forms do resize but the button looks weird. How do I get the button to be limited to the outer wrapper on a mobile device such that it looks like the same width as the form fields?

Here is the link to the page: http://46.4.68.131/gravity-forms/. Also, here is the CSS for the custom button.

body .gform_wrapper .gform_footer input[type=submit] {
    font-size:12px !important;
    background-color:#e4685d !important;
    -moz-border-radius:5px !important;
    -webkit-border-radius:5px !important;
    border-radius:5px !important;
    display:inline-block !important;
    color:#ffffff !important;
    font-size:16px !important;
    padding:8px 16px !important;
    text-decoration:none !important;
}

Here is the code I was experimenting with for the responsiveness but without any success. Any help would be appreciated. Thanks.

@media only screen and (max-width: 767px) { 
    body .gform_wrapper .gform_footer input[type=submit] { 
        width: 50% !important;
    }
}

1Bladesforhire 1Bladesforhire · Accepted Answer · 2015-10-03T04:25:53

0

votes

add box-sizing:border-box; so your padding is included in the sizing.

Responsive button for Gravity Forms

1 Answers