Gravity Forms Responsive Submit Button

0
votes

I'm using the Gravity Forms WordPress Form plugin.

I have a checkbox and submit button inline, but they are not responsive.

How can I make them stack top/bottom when you drag in the window (responsive/mobile view)?

My form (only set up as of now for Chrome and Safari): http://redesign.spyderlynk.com/contact-us

Here's the CSS I have for the inline submit button and checkbox. 

}
#field_1_4 label.gfield_label {
    display: none !important;
    float: right !important;
}
#gform_wrapper_1 .gform_footer.top_label {
    float: right !important;
    padding: 0 !important;
    margin: -40px 570px 0 0 !important;
}
.gform_wrapper form label { 
    float: none !important; 
}
2
csswordpressgravity-forms-plugin
The check-box and the button under the form on your website stack top/bottom when the screen is reduced to 768px. Do you want them to stay inline even when the screen is reduced below 768px? - Fahad Hasan

2 Answers

1
votes
@media only screen and (max-width: 767px){
#field_1_4 label.gfield_label {
    display: none !important;
    float: none;
}
#gform_wrapper_1 .gform_footer.top_label {
    float: none;
    padding: 0 ;
    margin: 0;
}
.gform_wrapper form label { 
    float: none !important; 
}
}
0
votes
@media only screen and (max-width: 767px){

.gform_wrapper .top_label li.gfield.gfield_error.gf_left_half, .gform_wrapper .top_label   
 li.gfield.gfield_error.gf_right_half {
   width: 100%;
   }

 .gform_wrapper .top_label li.gfield.gf_left_half {

    width:100%;
   }


   .gform_wrapper .top_label li.gfield.gfield_error.gf_right_half {
      width: 100%; 
 }


  .gform_wrapper .top_label li.gfield.gf_right_half {

  width: 100%; 
   }

  }