[recedoParticipant]

I have a gravity forms image upload field on the following page – http://thefestivalcookbook.com/submit-recipe/ – when viewed on my PC the bottom of the browse button appears to be cut off. On a mobile it is fine.

Here is a screenshot of how it looks from the PC.

How can I adjust this? Note that I had the same issue with other form plugins but decided to stick with Gravity as your theme has built in styling.

Thanks in advance
Simon

[Nabeel AModerator]

Hi Simon,

Thanks for writing in! Please add the following CSS code via Appearance > Customize > Custom > CSS:

body .gform_wrapper .top_label input.large, body .gform_wrapper .top_label select.large, body .gform_wrapper .top_label textarea.textarea, body .gform_wrapper .top_label li.gfield.gf_left_half input.medium, body .gform_wrapper .top_label li.gfield.gf_left_half input.large, body .gform_wrapper .top_label li.gfield.gf_left_half select.medium, body .gform_wrapper .top_label li.gfield.gf_left_half select.large, body .gform_wrapper .top_label li.gfield.gf_right_half input.medium, body .gform_wrapper .top_label li.gfield.gf_right_half input.large, body .gform_wrapper .top_label li.gfield.gf_right_half select.medium, body .gform_wrapper .top_label li.gfield.gf_right_half select.large, body .gform_wrapper .top_label li.gfield.gf_left_third input.medium, body .gform_wrapper .top_label li.gfield.gf_left_third input.large, body .gform_wrapper .top_label li.gfield.gf_left_third select.medium, body .gform_wrapper .top_label li.gfield.gf_left_third select.large, body .gform_wrapper .top_label li.gfield.gf_middle_third input.medium, body .gform_wrapper .top_label li.gfield.gf_middle_third input.large, body .gform_wrapper .top_label li.gfield.gf_middle_third select.medium, body .gform_wrapper .top_label li.gfield.gf_middle_third select.large, body .gform_wrapper .top_label li.gfield.gf_right_third input.medium, body .gform_wrapper .top_label li.gfield.gf_right_third input.large, body .gform_wrapper .top_label li.gfield.gf_right_third select.medium, body .gform_wrapper .top_label li.gfield.gf_right_third select.large, body .gform_wrapper .top_label li.gsection.gf_scroll_text, body .gform_wrapper .ginput_complex .ginput_left input[type="text"], body .gform_wrapper .ginput_complex .ginput_left input[type="url"], body .gform_wrapper .ginput_complex .ginput_left input[type="email"], body .gform_wrapper .ginput_complex .ginput_left input[type="tel"], body .gform_wrapper .ginput_complex .ginput_left input[type="number"], body .gform_wrapper .ginput_complex .ginput_left input[type="password"], body .gform_wrapper .ginput_complex .ginput_left select, body .gform_wrapper .ginput_complex .ginput_right input[type="text"], body .gform_wrapper .ginput_complex .ginput_right input[type="url"], body .gform_wrapper .ginput_complex .ginput_right input[type="email"], body .gform_wrapper .ginput_complex .ginput_right input[type="tel"], body .gform_wrapper .ginput_complex .ginput_right input[type="number"], body .gform_wrapper .ginput_complex .ginput_right input[type="password"], body .gform_wrapper .ginput_complex .ginput_right select, body .gform_wrapper .ginput_complex .ginput_full input[type="text"], body .gform_wrapper .ginput_complex .ginput_full input[type="url"], body .gform_wrapper .ginput_complex .ginput_full input[type="email"], body .gform_wrapper .ginput_complex .ginput_full input[type="tel"], body .gform_wrapper .ginput_complex .ginput_full input[type="number"], body .gform_wrapper .ginput_complex .ginput_full input[type="password"], body .gform_wrapper .ginput_complex .ginput_full select, body .gform_wrapper .gfield_error .ginput_complex .ginput_left input[type="text"], body .gform_wrapper .gfield_error .ginput_complex .ginput_left input[type="url"], body .gform_wrapper .gfield_error .ginput_complex .ginput_left input[type="email"], body .gform_wrapper .gfield_error .ginput_complex .ginput_left input[type="tel"], body .gform_wrapper .gfield_error .ginput_complex .ginput_left input[type="number"], body .gform_wrapper .gfield_error .ginput_complex .ginput_left input[type="password"], body .gform_wrapper .gfield_error .ginput_complex .ginput_left select, body .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type="text"], body .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type="url"], body .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type="email"], body .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type="tel"], body .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type="number"], body .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type="password"], body .gform_wrapper .gfield_error .ginput_complex .ginput_right select {
    height: 100% !important;
    width: 100% !important;
}

Let us know how this goes!

[recedoParticipant]

Thanks for your reply…

Ok, so that solved the button problem but caused another couple of problems…

1. The 2 text fields (well one text field and one website field – presumably only difference is validation) are now slightly different heights.

2. My 4 line text area is now huge

As per image below…

[Paul RModerator]

Hi Simon,

Try to replace the code given above with this.

body .gform_wrapper .ginput_complex.ginput_container {
     overflow: visible;
}

Hope that helps.

[recedoParticipant]

Thanks… That fixes the size of the text boxes but I still have the issue with the browse button not showing the full border. Anything else I can try? Thanks again for your help

Simon

[NicoModerator]

Hi There,

As we checked you site, the button looks fine.

Would you mind send us a screenshot about the issue.

Thank you so much!

Cheers!

[Author]

Posts