-
vitomazzAsked on December 6, 2018 at 3:27 PM
Hi, My developer built this following form and button using css:
https://www.jotform.com/build/83302741706351
However, as we can see, when placing the form on my site the button becomes much larger and does not fit in the screen: https://amznconsultants.com/amazon-account-management-services/
I also have it in 2 more places:
https://amznconsultants.com/amazon-consulting/
https://amznconsultants.com/contact/
Though it looks fine in the last two pages, it still doesn't mimic the look in the form builder.
This is what I mean specifically: https://prnt.sc/lrm90v
Please help me to fix this, thanks.Page URL: https://prnt.sc/lrm90v -
Anurag4274Replied on December 6, 2018 at 4:10 PM
This is due to fixed width of the button.
So, even though the overall width of the form is narrower at your other webpage, the width of the button doesn't change which results in the button overflowing out of the form.
To fix this, please add the following code in your CSS that limits the maximum width of the button to 80% of the width of the form:
max-width:80% !important;
The above code must be added in the CSS of the button. Please see the screenshot below:
I've created a working example of this form with correct CSS here:
https://form.jotform.me/83395799197481
Hope this helps!
-
Kevin Support Team LeadReplied on December 6, 2018 at 7:08 PM
@vitomazz,
You may also replace the fixed button width with a percentage, this way the button is resized accordingly to each screen size.
You can do that on the form injected CSS code:
This guide will help you finding the CSS section on your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
I hope this helps.