Button width different on site than in form builder

  • vitomazz
    Asked 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.

  • Anurag4274
    Replied 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.

    Button width different on site than in form builder Image 10


    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:

    Button width different on site than in form builder Image 21


    I've created a working example of this form with correct CSS here:

    https://form.jotform.me/83395799197481


    Hope this helps!


  • Kevin Support Team Lead
    Replied 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: 

    1544141253screenshot 01 Screenshot 10

    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.