Adjust the width of the input table column when in mobile view

https://form.jotform.com/241728209791362

" target="_blank" rel="nofollow noopener">

https://form.jotform.com/241728209791362

I Need help to resize this also. the product purchased (sku) width to amount purchased. same size to TXN#

Hi ACABAReForms,

Since you are using Input Table, adjusting the width of each column will cause the column's header text to break into a new line to accommodate the width. I suggest scaling down the Input Tables to 90%, this way the input will still in the same width and the text will remain as it is. 

/* Scaling down Input Tables for Mobile View - Ticket #16237281 */

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

table.form-matrix-table { 

     scale: 90% !important;

    margin-left: -8% !important;

}

}

/* Ends here */

Here is what it will look like once the code is added:

Adding the code above to your form is easy, let me show you how:

1. In Form Builder, click on Paint Roller icon on the top-right.
2. Click on Style tab. 
3. Scroll below and add your CSS code in Inject Custom CSS.
4. Click on Save and you are good to go. 

Let us know if you need more help in this.

can you do like this to my form?

also landscape layout do it for me thank you.

adjust the text box long width and the text inside make it smaller so that they can input long text inside the box.

i want the picture fit to mobile phone or have slide to swipe if its not compatible.
thanks

Hi ACABAReForms,

You can try adding this CSS code to increase the width of the column in the input table.

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

#cid_125 .form-textbox{

   max-width: 200px !important;

  min-width: 150px !important;

}

}

Check out this screencast of my result:

Give it a try and let us know if this works for you.

GREAT!

the text inside make it smaller so that they can input long text inside the box.

Thank you

Hi there,

Do you mean to say that the size of the text entered inside the cells should be smaller? It will be difficult to read. If that's what you're referring to, please add this CSS code to your form:

.form-matrix-table input[type="text"] {

font-size: 12px !important;

}

Please review and let us know.