How to format my form to look mobile responsive?

  • klowetx
    Asked on July 23, 2019 at 2:47 PM

    I am using the Tab Widget.  When viewing on a mobile phone, the tabs are off to one side.

    1563907448Tabs on Mobile Not Centered Screenshot 10

    It's the same on the PC & the header is off too.

    1563907502Tabs PC not Centered Screenshot 21


    Is there a way not to have the "JotForm" name in the form links?  Thank you for all the help!  Love your product and support.

  • Kevin Support Team Lead
    Replied on July 23, 2019 at 5:40 PM

    It seems like the layout has been distorted due to the CSS code that has been injected to the form, in order to correct this, try injecting this code: 

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

    div#header {

    padding-right: 0px;

    }


    ul#tabs-list li{

        width: 100%; 

        padding: 3px 0px;

    }


    ul#tabs-list {

        margin: 0px;

      }

    }



    @media screen and (min-width: 480px){

    ul#tabs-list {

        width: 100%;

        margin-left: auto;

        margin-right: auto;

    }


    ul#tabs-list li{

        width: 10.1%; 

    }


    div#header {

        margin-right: auto !important;

        margin-left: auto !important;

        width: 100% !important;

    }


    #id_1{

        padding-left: 1px;

    }

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • klowetx
    Replied on July 23, 2019 at 8:41 PM

    Thank you, that was perfect!!

  • klowetx
    Replied on July 29, 2019 at 7:28 PM

    I went back to check my form and two items were slightly off.  The color of the "Back" and "Next" buttons on pages 2, 3, 4 and 5 changed on both the PC and Smartphone.  Also, the Header (yellow band) at the top of these pages on the PC were not centered and stretched from side to side.  So, I chose the button type/color again which corrected the buttons on both the PC and smartphone.  But, I was not able to get the header band centered where it would stretch from left to right on the PC.  Any additional help would be much appreciated. 

  • Kevin Support Team Lead
    Replied on July 29, 2019 at 10:01 PM

    I have been checking this further and it seems like the issues are due to conflicts on the CSS codes, there was some code injected to target the text, but it was affecting the headers as well, we do recommend to carefully check the code injected to the form, this way you may prevent issues on how the form is displayed, a good way to troubleshot this is by removing the whole CSS code, keeping it in a text editor so you can inject it later, this way you can see if the issue is indeed caused by the form itself or some CSS code and in such case you may start injecting the code by pieces and see which one causes the issue. 

    Now, I have ended up modifying several parts of your code, please kindly replace all the CSS code in your form with this one



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

        #header > table:nth-child(1) > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(1) > div:nth-child(1) > span:nth-child(1) > span:nth-child(1) {

            font-size : 27px !important;

        }


    }


    .form-all {

        background-color : #e6e6e6;

        margin-top : 40px;

        margin-bottom : 40px;

        padding-top : 26px !important;

    }


    .form-all {

        -webkit-box-shadow : 0 2px 8px #000;

        -moz-box-shadow : 0 2px 8px #000;

        -box-shadow : 0 2px 8px #000;

        box-shadow : 0 2px 8px #000;

    }


    .form-line:not(#id_1):not(#id_117):not(#id_106):not(#id_118):not(#id_135) {

        padding-left : 25px;

        padding-top : 6px;

        padding-bottom : 6px;

        margin-top : 0;

        margin-bottom : 0;

    }


    .form-line.form-line-column {

        padding : 6px 0;

        margin-left : 40px;

    }


    .form-line[data-type=control_clear] {

        padding : 0;

        margin : 0;

    }


    .form-line[data-type=control_text] > .form-input-wide {

        margin-left : -4px;

    }


    .form-label {

        font-weight : bold;

    }


    .form-all .form-pagebreak-back, .form-all .form-pagebreak-next, .form-all .form-submit-button, .form-all .form-submit-button-simple_black:hover{

        height : 40px !important;

        -webkit-border-radius : 2px !important;

        -moz-border-radius : 2px !important;

        border-radius : 2px !important;

        padding-left : 20px !important;

        padding-right : 20px !important;

        border : #a7a7a7   solid 1px !important;

        background-color : #ececec !important;

        background : -webkit-linear-gradient(#fefefe  ,#dbdbdb  ) !important;

        background : -moz-linear-gradient(#fefefe  ,#dbdbdb  ) !important;

        filter : progid:DXImageTransform.Microsoft.gradient(startColorstr="#fefefe",endColorstr="#dbdbdb") !important;

        text-shadow : white 0 1px 0 !important;

        font-size : 12px !important;

        margin : 0 12px 0 0 !important;

        color: #666 !important;

    }   






    li[data-type=control_button] {

        background : rgb(248, 205, 69);

        overflow : hidden;

        padding-top : 10px;

        padding-bottom : 10px;

    }


    .form-buttons-wrapper {

        margin-left : 0!important;

    }


    li[data-type=control_pagebreak] {

        background : rgb(248, 205, 69);

    }


    .form-pagebreak {

        border-top : 0;

    }


    .date-separate {

        display : none;

    }


    #sublabel_litemode {

        display : none;

    }


    .form-label-left, .form-label-right {

        margin-bottom : 0;

    }


    .pspan {

        clear : both;

        float : left;

        width : 100%;

    }


    #header {

        width : auto !important;

    }


    .form-line-active {

        background : transparent;

    }


    .form-line-error {

        background : transparent;

    }


    .form-input {

        float : left;

    }


    .form-line:before, .form-line:after {

        display : table;

    }


    .form-line:after {

        clear : both;

        content : "";

    }


    .form-required {

        margin-left : 0 !important;

    }


    .headerclass {

        padding-top : 15px;

        padding-bottom : 15px;

        background-color : rgb(214, 214, 214);

    }


    .pagemargins {

        padding-left : 40px;

        padding-right : 40px;

    }


    .arial {

        font-family : Arial, Helvetica, sans-serif;

    }


    .pspan {

        clear : both;

        float : left;

        width : 100%;

    }


    #label_4 {

        color : rgb(236, 100, 66);

    }


    #label_5 {

        color : rgb(236, 100, 66);

    }


    #label_7 {

        color : rgb(236, 100, 66);

    }


    #label_8 {

        color : rgb(236, 100, 66);

    }


    #label_10 {

        color : rgb(236, 100, 66);

    }


    #label_11 {

        color : rgb(236, 100, 66);

    }


    #label_13 {

        color : rgb(236, 100, 66);

    }


    #label_14 {

        color : rgb(236, 100, 66);

    }


    #label_16 {

        color : rgb(236, 100, 66);

    }


    #label_17 {

        color : rgb(236, 100, 66);

    }


    #label_21 {

        color : rgb(236, 100, 66);

    }


    #label_28 {

        color : rgb(236, 100, 66);

    }


    #label_29 {

        color : rgb(64, 64, 64);

    }


    #label_31 {

        color : rgb(236, 100, 66);

    }


    #label_32 {

        color : rgb(64, 64, 64);

    }


    #label_34 {

        color : rgb(236, 100, 66);

    }


    #label_35 {

        color : rgb(64, 64, 64);

    }


    #label_44 {

        color : rgb(236, 100, 66);

    }


    #label_46 {

        color : rgb(64, 64, 64);

    }


    #label_48 {

        color : rgb(236, 100, 66);

    }


    #label_50 {

        color : rgb(64, 64, 64);

    }


    #label_52 {

        color : rgb(236, 100, 66);

    }


    #label_54 {

        color : rgb(64, 64, 64);

    }


    #label_61 {

        color : rgb(64, 64, 64);

    }


    #label_63 {

        color : rgb(64, 64, 64);

    }


    #label_67 {

        color : rgb(64, 64, 64);

    }


    #cid_115 div.form-header-group {

        padding : 0px 0px 0px 0px;

    }


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

        div#header {

            padding-right: 0px;

        }


        ul#tabs-list li{

            width: 100%; 

            padding: 3px 0px;

        }


        ul#tabs-list {

            margin: 0px;

          }

    }


    @media screen and (min-width: 480px){

        ul#tabs-list {

            width: 100%;

            margin-left: auto;

            margin-right: auto;

        }


        ul#tabs-list li{

            width: 10.1%; 

        }


        #id_1, #id_117, #id_106, #id_118, #id_135 {

            padding-left: 1px;

        }

    }


    Here's my cloned form where you may see the result: https://form.jotform.com/92036964998981 

    I hope this helps. 

  • klowetx
    Replied on July 29, 2019 at 11:20 PM

    Thank you Kevin for the effort!!  You guys are great.  Unfortunately, I don't know CSS code and it seems your code takes me back to where I started.  I have spent way too much time on this but truly appreciate JotForm trying their best to help.  Would JotForm have or could suggest any CSS consultants that I could pay to get this form done?

  • jherwin
    Replied on July 30, 2019 at 1:51 AM

    Unfortunately, we do not provide such services. If you want, you can hire a web developer with experience in Jotform to do your needs in www.upwork.com or any freelancing site.

    Also, I checked your form and it is mobile responsive now. You can send us a screenshot of the fields/page of your form you're referring to so we can check it.

  • klowetx
    Replied on July 30, 2019 at 7:49 PM

    What are you talking about mobile responsive?  It's always been responsive on mobile and PC.  The issue is with the tabs, headers and footers.  The tabs appear as they did in the pictures originally submitted.

    1.  PC:  The Tabs do not spread across the top evenly.

    2.  Mobile:  The tabs are not centered, they are off to one side.  Ideally it would be nice to have them stretch from side to side on the mobile.

    3.  PC & Mobile:  The tabs do not meet/join with the top band (safety meeting with yellow background)

    4.  Upload the Sign-In Sheet button color needs to be changed.  I have spent hours trying to figure this one out.

    Was the tab widget developed by JotForm?  I love the potential it has, but it is way over my head to get it to work.

  • Jed_C
    Replied on July 30, 2019 at 9:46 PM

    Please find my answers below to your questions.

    1). The tab are spread across evenly when I viewed my colleague's form. Can you please send us a screenshot of what you see on your end?

     1564536052safety meeting   Google Chrome Screenshot 10

    2). I believe you are referring to the screenshot below. If so, you can add the CSS code below to remove the margin.

    1564536186space Screenshot 21

    @media screen and (max-width: 480px)

    .jotform-form .form-all {

        margin: 10px !important;

        width: 100%;

    }


    3). Do you want to "Safety" meeting to be close onto your tabs? If so, inject this code:

    div#text_1 {

        margin-top: -38px;

    }

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

    div#text_1 {

        margin-top: -38px;

    }

    }

    As for your 4th question, I have created a separate thread for that question since it's not related to tabs. I will respond to your other question on this thread here https://www.jotform.com/answers/1909766 shortly.

  • klowetx
    Replied on July 30, 2019 at 10:49 PM

    1564540981Screenshot 20190730 210420 Edg Screenshot 10

    1564540961Safety Form Screenshot 2019 07 Screenshot 21

    Hello Jed,

    As you can see in the top picture, the tabs fall off the right side (Samsung S8 & S10 phone) and the yellow bar with Safety Meeting does not stretch from side to side on an Android mobile.

    The second picture is how the PC form looks in both Chrome and the Edge browsers.  The tabs are not spaced across evenly as they show in your picture.

    Yes the gap between the tabs and the yellow safety meeting bar should be closed.  Thank you very much for your help!


    -Keith

  • Jed_C
    Replied on July 31, 2019 at 1:44 AM

    The reason why it is still showing the same because you haven't injected the CSS code that my colleague provided.

    1564551271The Easiest Online Form Builde Screenshot 10

    Please check your form again. I have updated the CSS of your form so it should now be fixed according to how you want it to be displayed.

    PC:

    1564551828PC Screenshot 21

    Mobile:

    1564551857mobile Screenshot 32

    Let us know if you have any questions or if you need further assistance.