0

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

Ty Gerber
  • 1
  • 1
  • You may want to look at how various units (e.g., "em") are defined, and then decide whether you are using the correct unit. – Jeff Zeitlin May 12 '17 at 19:18
  • Can't see your wufoo form at all now? Also, an annoying pop up happens every time I click your testimonials section, might want to fix that. – Nathaniel Flick May 12 '17 at 19:31
  • Thank you for the replies. I used "em" for scaling and zooming reasons...read somewhere on Stack it was best practice to use "em" vs. "px" in media queries...either way, the issue still occurs with either. @NathanielFlick, is the Wufoo Form there now?? And, good looking out on the testimonials section! Thanks! – Ty Gerber May 12 '17 at 20:09
  • Sorry your link for the issue doesn't work at all now. – Nathaniel Flick May 13 '17 at 16:32
  • @NathanielFlick Sorry, the site is down when I'm not working on it. Please take a look now when you have the time. Thanks! – Ty Gerber May 15 '17 at 17:15

1 Answers1

0

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

Community
  • 1
  • 1
Laurel
  • 3
  • 3