PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Custom Styles

Gravity Support Forums » Plugin Support » Gravity Forms

  1. iintegral
    Member

    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: http://ballito.beautyandspa.co.za/business/cellu-beauty-spa (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: http://ballito.beautyandspa.co.za/test-3

    This works fine!

    Can you please look into how to resolve the issue.

    Regards.

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink

  2. Chris Hajer
    Key Master

    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:

    [css]
body .gform_wrapper form .top_label textarea.textarea

    or add the important rule to your style as you have done in your second example:

    [css]
width: 100% !important;

    Here's a good article on CSS specificity:
    http://css-tricks.com/specifics-on-css-specificity/

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink

  3. iintegral
    Member

    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

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink

  4. Chris Hajer
    Key Master

    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.

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink

This topic has been resolved and has been closed to new replies.