Gravity Support Forums Topic: Custom Styles

Gravity Support Forums Topic: Custom Styles https://legacy.forums.gravityhelp.com/topic/custom-styles Gravity Support Forums Topic: Custom Styles en-US Wed, 22 Apr 2026 21:11:37 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Chris Hajer on "Custom Styles" https://legacy.forums.gravityhelp.com/topic/custom-styles#post-85661 Wed, 31 Oct 2012 09:56:18 +0000 Chris Hajer 85661@https://legacy.forums.gravityhelp.com/ Glad you got that working. !important wins in (almost) every case, but if you can get more specific with your selectors, that will work as well. iintegral on "Custom Styles" https://legacy.forums.gravityhelp.com/topic/custom-styles#post-85655 Wed, 31 Oct 2012 09:51:17 +0000 iintegral 85655@https://legacy.forums.gravityhelp.com/ Hi Chris You know how it is! After posting, I managed to solve the problem by adding the !important rule (so I am impressed you got it right!). Works like a charm. Thanks for a BBRRIILLIIAANNTT product! Nano Chris Hajer on "Custom Styles" https://legacy.forums.gravityhelp.com/topic/custom-styles#post-85650 Wed, 31 Oct 2012 09:44:38 +0000 Chris Hajer 85650@https://legacy.forums.gravityhelp.com/ The textarea was 100% wide in both URLs. However, to ensure your custom CSS always 'wins' you might need to get more specific with your selectors. For example: <pre><code>[css] body .gform_wrapper form .top_label textarea.textarea</code></pre> or add the important rule to your style as you have done in your second example: <pre><code>[css] width: 100% !important;</code></pre> Here's a good article on CSS specificity: <a href="http://css-tricks.com/specifics-on-css-specificity/" rel="nofollow">http://css-tricks.com/specifics-on-css-specificity/</a> iintegral on "Custom Styles" https://legacy.forums.gravityhelp.com/topic/custom-styles#post-85633 Wed, 31 Oct 2012 09:12:30 +0000 iintegral 85633@https://legacy.forums.gravityhelp.com/ Hi We are currently developing a site which needs to 100% responsive and display properly on any device. For this to work, we need Paragraph Text fields to scale to 100% of the width of its containers. To do this, I added the following <style></style> code on the page: <style> .gform_wrapper .top_label textarea.textarea { width: 100%; } </style> Link: <a href="http://ballito.beautyandspa.co.za/business/cellu-beauty-spa" rel="nofollow">http://ballito.beautyandspa.co.za/business/cellu-beauty-spa</a> (open the contact form panel) Theme: Canvas fro WooThemes. The style is being correctly applied but always overriden by GF. How do I fix this and why does this happen? To test the scenario, I also embedded the same form on a test page as follows: <style> .gform_wrapper .top_label textarea.textarea { width: 100% !important; } </style> [gravityform id="1" name="Cellu Beauty Spa Contact Form"] Link: <a href="http://ballito.beautyandspa.co.za/test-3" rel="nofollow">http://ballito.beautyandspa.co.za/test-3</a> This works fine! Can you please look into how to resolve the issue. Regards.