Contact Form, Custom CSS: Unable to change width of input fields

  • Author
    Posts
  • #77350

    stkirby
    Member

    Hey Team, Still loving the theme.
    We are improving the look of the default contact form (Jetpack/GRUnion) for example http://brissupclub.com.au/contact/ has had some minor tweaks using the Custom CSS function.
    We can’t seem to override the Width of the Email/Text/TextArea fields. We are trying to set the widths to 95%.
    The grunion css trumps our changes in the custom css, even if we use !important on the width in our css. Some how the grunion takes precedence.

    Our CSS:

    .contact-form input[type="text"],
    .contact-form input[type="email"] {
    	border: dotted 1px #CC653C;
    	background: #fff;
    	width: 95%;
    	font-size: 1.3em;
    	font-family: "SketchFlow Print", "Dorsis", sans-serif;
    }
    .contact-form select {
    	height: 40px;
    	width: 95%;
    	border: dotted 1px #CC653C;
    	background: #fff;
    	font-size: 1.3em;
    	font-family: "SketchFlow Print", "Dorsis", sans-serif;
    }

    The rendered page takes it all but the width, the computed result:

    width: 300px;
        .contact form ... width: 300px; grunion.css (1)
        .contact form ... width: 95%; s2.wp.com(1)

    (strike out line)

    The only field type that takes the width command in the SELECT dropdown.

    width: 509.59px;
    .contact-form select width: 95%; s2.wp.com(1)
    select 100% _static (1675)

    (strike out line)
    Any ideas to why the Custom CSS is not getting the priority?
    I also tried a custom class but I may have stuffed that up, so I removed it.

    The blog I need help with is brissupclub.com.au.

    #77446

    stkirby
    Member

    Just a quick update I successfully added a class ID to the DIV containing the form and it worked.
    Again classes just don’t seem to override it, still could be me.
    I would only be using the ID once on a page so hopefully ID won’t cause any problems.
    I’ve only applied it to the input email field. I can leave it that for a bit if you want to check it out so see why it was being over ridded.
    Thanks

    #77519

    anarieldesign
    Theme Author

    Hi,

    you need to add:

    .contact-form textarea,
    .contact-form input[type="text"],
    .contact-form input[type="email"] {
      width: 95%;
    }

    Try to check the Custom Css code you wrote, maybe you didn’t close something or maybe there is some small missing thing and this is why it is not working.

    Let me know if you menage it on your own.

    All the best,
    Ana

    #77539

    stkirby
    Member

    Hey Ana,
    That is just about the CSS I’m using, I use a CSS passer to check for correctly formed CSS (made far too many mistakes before, all learning I guess).
    I pasted your code into the CSS just to check, still no joy.
    It is weird, I just can’t see how it does not get precedence over the GRUnion CSS, unless GRUnion is running last in the page load sequence. But then ‘!important’ still does not fix it.
    No rush on this, we are starting to move the site to a custom host, so lots of things to do.
    Cheers

    #77545

    anarieldesign
    Theme Author

    It is strange. When i add the code i sent you inside the Chrome inspector for the theme live demo it works fine.
    I’ll check it a little bit more.

    Cheers,
    Ana

    #77547

    anarieldesign
    Theme Author

    You can try using this:

    textarea#contact-form-comment-g79-comment {
      width: 95%!important;
    }

    #77548

    stkirby
    Member

    Cool, With the direct page/object reference, yes that works, with and without the !important;

    I’ve updated the CSS and saved it with your code on the textarea field.
    So currently on the page, email is done via a ClassID,
    Dropdown/Select is working with generic custom CSS
    Name is not working with generic custom CSS.

    I loaded Chrome into the PC (against my religion, but for you anything), it does not render the page any differently, but I do like its’ CCS inspection over IE.

    Hope this helps you find it,
    Steve…K.

    #77595

    anarieldesign
    Theme Author

    Hi Steve,

    i checked on the sandbox test website with the Tuned Balloon theme and Custom CSS and this works:

    .contact-form textarea,
    .contact-form input[type="text"],
    .contact-form input[type="email"] {
      width: 95%!important;
      max-width: 95%!important;
    }

    All the best,
    Ana

    #77622

    stkirby
    Member

    Thank you once again Ana, works well.

    #77627

    anarieldesign
    Theme Author

    Glad i could help :).

    All the best,
    Ana

The topic ‘Contact Form, Custom CSS: Unable to change width of input fields’ is closed to new replies.