How to align form field for mobile device?

  • Profile Image
    abacusfinancial
    Asked on January 03, 2018 at 02:26 AM

    Hi. On my "Summary" tab I changed the margins and padding to create my own input table using text and number fields. On the computer view it looks fine but in mobile view it doesn't keep my formatting at all. Instead of there being 4 boxes per line, there is only 1 box per line. Can you provide me with the CSS to fix this please?

  • Profile Image
    ashwin_d
    Answered on January 03, 2018 at 03:57 AM

    Please inject the following custom css code in form and see if that solves your problem:

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

    #label_64, #label_65, #label_66, #label_67 {

        font-size: 11px;

    }

    #id_64, #id_65, #id_66, #id_67, #id_183, #id_184, #id_185, #id_186, #id_225, #id_226, #id_227, #id_228, #id_229, #id_230, #id_231, #id_232, #id_233, #id_234, #id_235, #id_236, #id_68, #id_69, #id_70, #id_71, #id_112, #id_113, #id_114, #id_115, #id_116, #id_117, #id_118, #id_119, #id_120, #id_121, #id_122, #id_123, #id_124, #id_125, #id_126, #id_127, #id_128, #id_129, #id_130, #id_131, #id_132, #id_133, #id_134, #id_135, #id_488, #id_489, #id_490, #id_491, #id_197, #id_198, #id_199, #id_200, #id_201, #id_202, #id_203, #id_204, #id_205, #id_206, #id_207, #id_208, #id_209, #id_210, #id_211, #id_212, #id_213, #id_214, #id_215, #id_216, #id_217, #id_218, #id_219, #id_220, #id_221, #id_222, #id_223, #id_224, #id_237, #id_238, #id_239, #id_240, #id_241, #id_242, #id_243, #id_244, #id_245, #id_246, #id_247, #id_248

    {

    width: 70px;

    }

    }

    The following guide should help you how to inject custom css code in form:   https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes