Help to adjust form tabs on mobile view.

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

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.

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

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: 

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.

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:

Please allow me some time to test.

Thanks.

Thanks ronet, awaiting your response.

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);

}.....

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.

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

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.