CSS Fix for submit button that's expanding beyond its container?

http://test.breakingtradition.net/traditiongame/

I'm using some contact forms to take input for this game that I'm putting together for a client. So I finally got the game working properly, but there's some weird CSS glitch with the Contact Form 7 Plugin. I'm having the same problem on another install of wordpress, so I'm pretty sure that the plugin is causing the problem, I'm just not sure how to fix it.

So what happens is, in a full width browser the submit button is a normal size (approx 80px wide), but when you resize the browser, all of a sudden the input button decides to be wider than the div that it's contained within! I've tried specifying a width for the element using the developer tools, but no luck. I think there must be some !important CSS in the plugin? I'm not sure where to look.

Any ideas?

Regards,

Dakota

  • Dakota

    Huh!

    Thanks for finding this!!! Why isn't that applying when the browser is full width? Reading that it seems like the button would be full width at all times, but as it stands it only happens when the screen is more narrow....

    I can probably safely remove that !important; and that should allow me to override the custom width, correct?

    That seems like a really strange thing to have in the stylesheet!

    Thanks again, Vaughan!

    Regards,

    Dakota

  • Dakota

    Hi Vaughan!

    Thank you again for tracking this down! I looked at it again and I think I see what the problem was. It was indeed an @media query, and looking at the rest of the stylesheet, I can see that it was probably supposed to be max-width instead of width! Like this:

    @media only screen and (max-width: 767px) {
      button, .button, input[type=submit] {
        display: block;
        max-width: 100% !important;
        margin: 15px 0;
      }
    }

    instead of:

    @media only screen and (max-width: 767px) {
      button, .button, input[type=submit] {
        display: block;
        width: 100% !important;
        margin: 15px 0;
      }
    }

    I think I'm going to change that to 90% as well, I don't think I ever need a submit button to be as wide as the screen, and if it were it might overflow anyway if it has any left margin at all! I made the update and the buttons are working fine now!

    Thanks again, Vaughan!!!

    Cheers!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.