Media Queries Don't Appear To Be Working for Tablet or Desktop

Question

I've been struggling with this issue for much longer than I've cared for, and I can't seem to fix the issue. I'm using Wufoo Forms and am just wanting to center it up visually on the various screen sizes, and am using media queries to try and achieve this.

To see the issue live, please visit storanddeliver.com and you'll see the forms on the home page.

I've rewritten these multiple times and compared them against other answers here on Stack and I can't seem to find any syntax issues, and yet for some reason they still don't work...(smartphone is the only one that works on all screen sizes). Thanks for all the help!

Below are my media queries. (Media Queries Updated Syntacticly at 15:55 05/12/17)

/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width: 640px) {
   form.wufoo {
       margin-left: 6em !important;
       margin-top: 2em !important;
       clear: both !important;
   }
   body::before {
       content: "mobile to some tablet media query fired";
       font-weight: bold;
       display: block;
       text-align: center;
       background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 99;
 }
}

@media screen and (max-width: 850px) {
    form.wufoo {
        margin-left: 1em !important;
        margin-top: 0 !important;
    }
    body::before {
        content: "tablet media query fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
 }
}

@media screen and (max-width : 1224px) {
    form.wufoo {
        margin-left: 1em !important;
        margin-top: 0 !important;
    }
     body::before {
        content: "laptop media query fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
  }
}

Also, I would like to just make a distinction. While the Wufoo Form is being served through an iframe, all the CSS it should be applying during screen resizing and encountering different screen sizes is coming from a custom CSS file uploaded through my account at Wufoo...not sure if this extra information helps, but just wanted to make sure this was known.

The full CSS file can be found here: https://www.dropbox.com/s/xc61w4m35nefbyr/wufoo%20%281%29.css?dl=0

Answer 1

It looks like you're trying to add styling to an iframed form. You'll want to make sure you are using the same CSS selectors that the Wufoo default stylesheet uses.

Here's more information on custom CSS for Wufoo:

Using Custom CSS to Style Your Forms & Reports

Custom CSS for Wufoo

Here's more information on iframes if needed: Applying CSS to an IFrame

Hope this helps