https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page Gravity Support Forums Topic: fields stretching across the whole page en-US Mon, 20 Apr 2026 12:46:06 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25403 Thu, 12 May 2011 11:20:46 +0000 Kevin Flahaut 25403@https://legacy.forums.gravityhelp.com/ <p>Wonderful. Thanks Chris. I'm pleased I could help out. </p> https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25402 Thu, 12 May 2011 11:11:10 +0000 CG 25402@https://legacy.forums.gravityhelp.com/ <p>Thanks again, Kevin,</p> <p>You are a star!</p> <p>I did what you said and it worked a treat! </p> <p>Strange thing is though, I later managed to accidently delete<br /> the code you gave me above BUT found<br /> that it was working miraculously without it i.e. using the original code<br /> that was apparently not cutting it and hence my last cry<br /> for help.</p> <p>Really not sure how it worked but the fact is it does! </p> <p>For anyone that might be reading this thread, and<br /> possibly having similar issues, here is the final code<br /> that solved all my issues above.</p> <pre><code>[css] body #gform_wrapper_1 {width:580px} .gform_body .gfield input[type=text] {height: 20px; width: 310px; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #636363;} .gfield textarea {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #636363; width: 400px;} .gfield_label {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #8a8a8a;} .gfield select {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #8a8a8a;} body #gform_wrapper_1 .gform_body .gform_fields .gfield select {border:1px solid #636363; font-size:0.9em; color:#636363; width: 315px; }</code></pre> <p>Big, big thanks again to you, Kevin. I'm very pleased<br /> and equally impressed at the speed and usefulness<br /> of the help you are giving!</p> <p>Cheers</p> <p>Chris </p> https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25324 Wed, 11 May 2011 14:53:53 +0000 Kevin Flahaut 25324@https://legacy.forums.gravityhelp.com/ <p>You don't need to add extra classes to change anything, you just need to target the textarea element for the "paragraph text"</p> <p>In the previous example, I purposely omitted the textarea from the first rule because you probably didn't wan't a textarea to be defined as the same height as the other inputs. If you want to define specific properties for that, you could create a simple rule for that field.</p> <pre><code>[css] /* reset the form wrapper width */ body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea { font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #8a8a8a }</code></pre> <p>If that's not working, then it's probably inheriting some other rule from your theme. If you're targeting using the example above it should be fine. I don't see a URL to your form so I can't tell you for sure. </p> https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25323 Wed, 11 May 2011 14:53:53 +0000 Kevin Flahaut 25323@https://legacy.forums.gravityhelp.com/ <p>You don't need to add extra classes to change anything, you just need to target the textarea element for the "paragraph text"</p> <p>In the previous example, I purposely omitted the textarea from the first rule because you probably didn't wan't a textarea to be defined as the same height as the other inputs. If you want to define specific properties for that, you could create a simple rule for that field.</p> <pre><code>[css] /* reset the form wrapper width */ body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea { font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #8a8a8a }</code></pre> <p>If that's not working, then it's probably inheriting some other rule from your theme. If you're targeting using the example above it should be fine. I don't see a URL to your form so I can't tell you for sure. </p> https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25305 Wed, 11 May 2011 12:12:36 +0000 CG 25305@https://legacy.forums.gravityhelp.com/ <p>Sorry, Kevin,</p> <p>Just a little adjustment to my "...it's all working fine." comment above.<br /> Just checked something that I didn't check last night and it's not quite right.</p> <p>I have the following fields:</p> <p>1. Name:<br /> 2. Email:<br /> 3. Phone:<br /> 4. Country: (single line text field)<br /> 5. Type your enquiry here (paragraph text field)</p> <p>I've managed SUCCESSFULLY to change:</p> <p>* the height of the input boxes<br /> * the font, color and size of the text labels<br /> * the font, color and size of the input text </p> <p>for ALL EXCEPT number 5: Type your enquiry here (paragraph text field)</p> <p>The only thing I was able to change was the text color... not the size or the font?<br /> I just can't figure out why? </p> <p>Any ideas would AGAIN be appreciated!</p> <p>Here is the code: </p> <pre><code>[css] body #gform_wrapper_1 {width:450px} .gform_body .gfield input[type=text] {height: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #636363;} .gfield textarea {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #636363;} .gfield_label {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #8a8a8a;} .gfield select {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #8a8a8a;}</code></pre> <p>I am correct in thinking that the problem field is .gfield textarea ?</p> <p>I even tried giving it a custom class name : CG-txt<br /> and tried: </p> <p>body #gform_wrapper_1_CG-txt .gform_body .gfield textarea {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #636363;}</p> <p>but that didn't work so I am clearly barking up the wrong tree with that one.</p> <p>As I say, any more of your very handy tips, Kevin, would help me sleep better tonight :)</p> <p>Cheers</p> <p>Chris </p> https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25198 Tue, 10 May 2011 12:32:18 +0000 Kevin Flahaut 25198@https://legacy.forums.gravityhelp.com/ <p>Not sure. I'm not familiar with that theme at all. You just want to put that at the end of whatever stylesheet gets loaded on the page. From what I see, it's the style.css file.</p> <p>When I add it in my test (via the firebug inspector) it works just fine.</p> <p>screenshot: <a href="http://grab.by/a5Vu" rel="nofollow">http://grab.by/a5Vu</a></p> <p>You can try adding the !important declaration, but you shouldn't need it from what I can tell.</p> <pre><code>[css] body #gform_wrapper_1 { width: 640px!important }</code></pre> https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25185 Tue, 10 May 2011 11:53:22 +0000 kshaw 25185@https://legacy.forums.gravityhelp.com/ <p>Kevin,</p> <p>i was able to fix the side by side- thank you- however after adding body #gform_wrapper_1 {width:640px) to the style.css file in the editor i get no change. i'm using flexibility 3 theme and they do have a custom css and style code section in their theme options so i tried it there also and still got no change. any ideas? thanks again- keith </p> https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25183 Tue, 10 May 2011 11:33:51 +0000 Kevin Flahaut 25183@https://legacy.forums.gravityhelp.com/ <p>@CG, My pleasure. Thanks for the update. </p> https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25182 Tue, 10 May 2011 11:29:49 +0000 CG 25182@https://legacy.forums.gravityhelp.com/ <p>Thanks very much, Kevin!</p> <p>Did what you said and it's all working fine!</p> <p>Really do appreciate it! </p> <p>Cheers!</p> <p>Chris :) </p> https://legacy.forums.gravityhelp.com/topic/fields-stretching-across-the-whole-page#post-25179 Tue, 10 May 2011 11:10:11 +0000 Kevin Flahaut 25179@https://legacy.forums.gravityhelp.com/ <p>You would do something like this. It targets all of the normal input styles &amp; selects (drop downs) so you can define a height and/or other properties. There is a separate rule that includes textareas (paragraph text) to declare the font style, color, etc.</p> <pre><code>[css] /* reset the form wrapper width */ body #gform_wrapper_1 {width:640px} /* define the heights on the inputs and selects */ body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=password], body #gform_wrapper_1 .gform_body .gform_fields .gfield select { height:24px; } /* change the font color and styles for the inputs, selects and textareas */ body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=password], body #gform_wrapper_1 .gform_body .gform_fields .gfield select, body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea { color:#f00; font-family:sans-serif; font-style:italic }</code></pre> <p>Note: to change to a different style on fields that have been completed you'll need to add some kind of jQuery scripting to add a new class name and then define that new class in your CSS. It's not something you can do with just a CSS change itself. </p>