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.

Overwriting CSS - width: 95% !important;

Gravity Support Forums » Plugin Support » Gravity Forms

  1. crondeau
    Member

    Can someone please have a look at this form for me? I think I might be losing it.

    http://vancouverdentalgroup.ca/wp/contact-us/

    The form looks great, but on mobile devices, I would love to have the first and last also be 100% and I cannot figure out what CSS to use.

    I have the following right now:

    #main .gform_wrapper .ginput_complex .ginput_left  {
		width: 100% !important;
		float: left;
	}

	#main .gform_wrapper .ginput_complex .ginput_right,
	#main .gform_wrapper .top_label input.medium,
	#main .gform_wrapper .top_label select.medium {
		width: 100% !important;
		float: left;
	}
	#main .gform_wrapper .ginput_complex .ginput_left input[type=text],
	#main .gform_wrapper .ginput_complex .ginput_right input[type=text],
	#main .gform_wrapper .ginput_complex input[type=text],
	#main .gform_wrapper .ginput_complex input[type=url],
	#main .gform_wrapper .ginput_complex input[type=email],
	#main .gform_wrapper .ginput_complex input[type=tel],
	#main .gform_wrapper .ginput_complex input[type=number],
	#main .gform_wrapper .ginput_complex input[type=password],
	#main .gform_wrapper .ginput_complex select {
		width: 100% !important;
	}
    Copy

    It's almost there, but there's still a slight difference. Can anyone see something? I think I'm going cross-eyed.

    Posted 11 years ago on Thursday June 27, 2013 | Permalink

  2. Rob Harrell
    Member

    I just pulled this up on my phone and all looks well to me.

    Posted 11 years ago on Thursday June 27, 2013 | Permalink

  3. Richard Vav
    Administrator

    Looks OK on the iPad as well, one thing I did spot is the following rule in your theme's stylesheet which is adding a bottom margin to the datepicker so you have a transparent area between the bottom of the calendar and the border http://i.imgur.com/aOTr1Yh.png?1

    table {
margin: 0 0 1.5em;
width: 100%;
}
    Copy

    you can override it by adding the following to wherever you place custom CSS

    .ui-datepicker table {
    margin: 0;
}
    Copy

    Regards,
    Richard

    Posted 11 years ago on Thursday June 27, 2013 | Permalink

  4. crondeau
    Member

    Thanks guys. Appreciate getting more eyes to look at this.

    Posted 11 years ago on Thursday June 27, 2013 | Permalink

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