How to adjust the "Description" column to become larger, and the other smaller?

I noticed as well that the first column, cuts the phrases in an way that for few rows I can't even know the difference between the rows, since the first part of the phrases are equal, how can I adjust the description column to be larger, and the other two smaller just to fit it all well?

Hi ICAC,

Thanks for reaching out to Jotform Support. We’ll need a bit of time to look into this. We'll get back to you as soon as we can.

We appreciate your patience and understanding in this.

Hi ICAC,

Thanks for your patience as we look at this. Adding the following code to your widget will help you adjust "Description" column to become wider: 

/* Adjust "Description" column to become wider - Ticket #14059551 */

th#col_A { width: 85% !important; }

/* Ends here */

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

At the present "Women" column are slightly bigger than the other, this is because the text "Women" have 2 more character than the other. If the text remains in the same length, the column size will display as the other.

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

1. In Form Builder, click on the widget you want to add. 
2. Click on Wand icon beside the blue border. 
3. Click on Custom CSS tab. 
4. Enter your CSS code in the text area. 
5. Click on Update Widget and you are good to go.

Let us know if you need more help in this.

Hello Jessica, thank you for helping me out. I used the css code you gave me, and it worked just perfectly, but I have another question:

Is there a way to keep the format of the question when I open it on my cellphone as well? It doesn't necessarily have to keep the same format, but I need to show completely the question completely when I open it on my cell phone. Is that possible?

This is what happens when I open it on my cell phone.

Hi ICAC,

Thanks for getting back to us. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

We really appreciate your patience and understanding. 

Hi ICAC,

Thanks for patiently waiting. Do you mean adjusting the column width too when viewing your form using mobile? If so, you can adjust it by adding a CSS code too. Let me show you how to do that:

1. In Form Builder, click on Spreadsheet widget. Then, click on the Wand Icon.
2. Click on Custom CSS tab. 
3. Enter your CSS code below in the text area. 
4. Click on Update Widget and you are good to go.

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

th#col_A {

min-width: 200px !important;

}

}

You can adjust the value of min-width:200px to a different value that will fit with your requirement.

This is what it looks like after adding the CSS code:

Give it a try and let us know if you have any other questions.