Text boxes are not full width

Sorry – answered in the wrong thread ….

Yep – very easy to do.

1. Enable Custom CSS on the Plugin Settings page.
2. Add the following to the Custom CSS section:

   div.ss-form-entry > input { width: 400px; }
   div.ss-form-entry > textarea { width: 400px; }

That should do it for you – change the 400px to whatever value you’d like the width to be. There are lots of CSS classes defined which allow you to really tweak the form to make it look the way you want it to.

Thanks. I’m happy this was such an easy fix.

Hi! I tried this but it didn’t work. Nothing happened

Here’s my link:

https://vetiverfarmsphilippines.com/vetcon/home/online-registration-form/

It is working as it should. Your text boxes are 400 pixels wide. If you look at the elements with a tool like FireBug or Chrome’s element inspector, you can turn the CSS on and off and see the width of the text box change from 400px to the default width.

What were you expecting to happen?

Oh…It wasn’t like that a while ago. The text boxes were shorter than the prefix list. I guess I just needed to be patient. Thanks!

More than likely the page was cached by your browser. That happens sometimes with CSS. You can always force a page reload by holding the shift key down while refreshing the page.

The other thing you probably want to add to your custom CSS is the following:

div.ss-q-title label {
    display: inline;
}

This will move the required asterisk up next to the question label.

Copy that. Thank so much!

Sorry for this post, I don’t know if I’m blind or what, but where can I enable custom css and add the correct width?

The plugin has a whole slew of settings. On the Dashboard, choose Settings->Google Forms.