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.

Responsive template / field width

  1. mlemmond
    Member

    I've read other posts and can't seem to fix my problem.

    I have a responsive template and I know where to edit the width of the fields and submit button in the CSS. I can change the submit button width using percentages but I can't seem to change the width of the fields in percentage (or px for that matter). Why? Is this an issue with the field size selector? (Small / Medium / Large).

    Here is my site: http://www.lemmonddesign.dreamhosters.com/.

    Below is the code I have in the smallest size. I can edit the submit button width but not the input fields.

    Help!

    .gform_wrapper {
    	margin: -20px 0px -10px 0px;
    	padding: 0px 0px 0px 0px;
    }
    
    body .gform_wrapper .gfield_required {
    	display: none;
    	width: 100%;
    }
    
    .gform_wrapper .gform_body .gform_fields .gf_inline {
    	margin: 0px -10px 0px 0px;
    	width: 100%;
    }
    
    #input_1_4 {
    	height: 36px;
    	padding: 9px 0 9px 0;
    	width: 100%;
    }
    
    /*---Edit Submit Button in GF---*/
    .gform_wrapper .gform_footer .button {
    	float: none;
    	height: 36px;
    	width: 20%;
    	margin: 0px 0px 0px 0px;
    }
    Posted 12 years ago on Saturday August 4, 2012 | Permalink
  2. Can you try using the !important rule to be sure your CSS rules override all the others?

    Here's a quick explanation of the rule:
    http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

    For one of your selectors, the modified CSS would look like this:

    [css]
    .gform_wrapper {
    	margin: -20px 0px -10px 0px!important;
    	padding: 0px 0px 0px 0px!important;
    }

    If you prefer not to use the !important rule, you will have to make your CSS selectors more specific.
    http://css-tricks.com/specifics-on-css-specificity/

    Posted 12 years ago on Saturday August 4, 2012 | Permalink
  3. mlemmond
    Member

    Works great, thanks!

    Posted 12 years ago on Monday August 6, 2012 | Permalink
  4. Outstanding. Thank you for the update.

    Posted 12 years ago on Tuesday August 7, 2012 | Permalink

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