How to change size of button on Mobile Platform

If I can pick your brain for one more thing: I've created the forms mentioned previously, but when I add them onto my Joomla website, the button stretches across the full width of the containing module. I'm wondering if I can have the button displaying only in the middle, similar to what it looks like in the 'preview' of the form...

Expectations: 

Reality:

 

The form link is: https://form.jotformeu.com/60385132821349

And it's embedded here: http://www.onestopit.com/security-services/194-it-security-awareness-training 

First of all thank you for detailed information. We would appreciate it if you could add the CSS code below from designer.

 

@media only screen and (max-device-width: 550px){

    .form-submit-button {

        width : 80px !important;

    }

}

 

Here is how it works:

If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

Hi Beril,

I tried that solution and it did not work because I needed the form to adjust according to the width of the containing element, not the device screen itself. So I changed it to the following and it worked like a charm:

@media only screen and (max-width: 550px){

    .form-submit-button {

        width : auto !important;

    }

And the following works as well:

.form-submit-button {

        width : auto !important;

    }

 

I've not noticed the CSS tab in the designer options before, so thanks a lot for pointing that out!

That's great. Thank you for sharing your solution with us. We are glad to hear that the issue has been resolved for you.

If you need any further assistance feel free to contact us. We will be happy to assist you.