-
ClintlunaAsked on April 10, 2019 at 6: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
-
Jed_CReplied on April 10, 2019 at 8: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.
Please try the code in the link provided and see if that resolves the issue.
-
ClintlunaReplied 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:
-
jherwinReplied 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.
-
ClintlunaReplied on April 11, 2019 at 6: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:
-
roneetReplied on April 11, 2019 at 10:36 AM
Please allow me some time to test.
Thanks.
-
ClintlunaReplied on April 11, 2019 at 6:52 PM
Thanks ronet, awaiting your response.
-
ClintlunaReplied on April 11, 2019 at 9: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);
}.....
-
roneetReplied 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.
-
ClintlunaReplied 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.
-
Jed_CReplied 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.