Help to adjust form tabs on mobile view.

  • Profile Image
    Clintluna
    Asked on April 10, 2019 at 06:17 PM

    Hi on the form below in the mobile version, all of the form tabs up top go to the left with whitespace on the right. I'd like them to be centered with 21px of whitespace on each side. The code I have in the tabs now is listed below. Thanks!

     

    CODE:

     

    @media (max-width: 480px){

    #form-tab-1{

    width: calc(100% - 42px);

    }

    #form-tab-2{

    width: calc(100% - 42px);

    }

    #form-tab-3{

    width: calc(100% - 42px);

    }

    #form-tab-4{

    width: calc(100% - 42px);

    }

    #form-tab-5{

    width: calc(100%- 42px);

    }

    }




    Form: https://www.jotform.com/build/82815789429171

  • Profile Image
    Jed_C
    Answered on April 10, 2019 at 08:05 PM

    Please remove all the CSS in your tabs widget and replace it with the CSS code in this link https://pastebin.com/ipUmyH1L.

    I have remove some codes that are not CSS as I can see that there are some JS script added in the CSS tab. I have also adjusted the width to fit the tabs in mobile view.

    1554941453Ride Sharing Quote Request For

    Please try the code in the link provided and see if that resolves the issue.

  • Profile Image
    Clintluna
    Answered on April 10, 2019 at 10:08 PM

    Hi Jed, thanks for the reply....I tried inserting that code into the tab widget, but there was still white space just on the right side while none one the left side in mobile. Here's a pic below: 1554948529Screen Shot 2019-04-10 at 7.03

  • Profile Image
    jherwin
    Answered on April 10, 2019 at 11:36 PM

    Please try to inject this custom CSS code to your form:

    @media (max-width: 480px){
    #form-tab-1,#form-tab-2,#form-tab-3,#form-tab-4,#form-tab-5 {
       margin-left: 21px!important;
       margin-right: 21px!important;
       width:317px!important;
    }
    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please try it with the actual device and let us know how it goes. If the issue persists, please tell us the device you are using so we can test it with the same.

  • Profile Image
    Clintluna
    Answered on April 11, 2019 at 06:17 AM

    Hi Jherwin, 

    The margin left works, but the margin right seems to have no effect at all...not sure why. Here's how it looks with the code above, thanks:


    1554977828Screen Shot 2019-04-11 at 3.15

  • Profile Image
    roneet
    Answered on April 11, 2019 at 10:36 AM

    Please allow me some time to test.

    Thanks.

  • Profile Image
    Clintluna
    Answered on April 11, 2019 at 06:52 PM

    Thanks ronet, awaiting your response.

  • Profile Image
    Clintluna
    Answered on April 11, 2019 at 09:46 PM

    Is there a way to use this code but to just subtract 21px from each side?:


    @media (max-width: 480px){

    #form-tab-1{

    width: calc(100% - 42px);

    }.....

  • Profile Image
    roneet
    Answered on April 11, 2019 at 10:17 PM

    I have injected the following CSS in the Form Designer of your Form. Could you please check now?

    #tabs-list {
     position: relative;
     left: -17px;
    }

    May we know where are you injecting the CSS code that was suggested by my colleague as it seems same CSS code is pasted in the Form Designer and the Form Tab's CSS field which is causing wrong alignment and width and due to this reason the CSS seems not to work correctly.

    Looking forward to your response.

    Thanks.

  • Profile Image
    Clintluna
    Answered on April 11, 2019 at 10:33 PM

    Hi it looks better now, but it seems the form is scrolling from left to right now on mobile. 



  • Profile Image
    Jed_C
    Answered on April 11, 2019 at 11:09 PM

    I made some adjustment to your form tab widgets and remove the HTML tags in the CSS tab. Please check the form again and let us know if the adjustment is ok.