How to change size of button on Mobile Platform

  • Profile Image
    alexosit
    Asked on February 09, 2016 at 10:46 AM
    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 

  • Profile Image
    beril
    Answered on February 09, 2016 at 11:04 AM

    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.

  • Profile Image
    alexosit
    Answered on February 10, 2016 at 04:04 AM

    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!

  • Profile Image
    beril
    Answered on February 10, 2016 at 06:44 AM

    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.