Media Queries scheint nicht für Tablet oder Desktop zu arbeiten

Question

Ich habe mit diesem Problem viel länger als ich mich gekümmert hatte, und ich kann nicht scheinen, das Problem zu beheben. Ich benutze Wufoo Forms und möchte es nur visuell auf den verschiedenen Bildschirmgrößen zentrieren und verwende Medienabfragen, um das zu erreichen.

Um das Problem live zu sehen, besuchen Sie bitte storanddeliver.com und Sie werden die Formulare auf der Homepage sehen.

Ich habe diese mehrmals neu geschrieben und verglichen sie mit anderen Antworten hier auf Stack und ich kann nicht scheinen, Syntaxprobleme zu finden, und doch aus irgendeinem Grund funktionieren sie immer noch nicht ... (Smartphone ist die nur eine, die auf allen Bildschirmgrößen funktioniert). Danke für die Hilfe!

Unten sind meine Medienabfragen. (Media Queries Aktualisiert syntaktisch bei 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; 
    } 
} 

Außerdem würde Ich mag nur einen Unterschied machen. Während das Wufoo-Formular über einen Iframe bereitgestellt wird, stammen alle CSS, die während der Bildschirmgrößenanpassung und der Anzeige unterschiedlicher Bildschirmgrößen angewendet werden sollen, aus einer benutzerdefinierten CSS-Datei, die über mein Konto bei Wufoo hochgeladen wurde ... nicht sicher, ob diese zusätzlichen Informationen hilfreich sind. aber ich wollte nur sichergehen, dass das bekannt war.

Die vollständige CSS-Datei finden Sie hier: https://www.dropbox.com/s/xc61w4m35nefbyr/wufoo%20%281%29.css?dl=0

Answer 1

Es sieht aus wie Sie versuchen, Styling zu einer IFramed Form hinzuzufügen. Sie sollten sicherstellen, dass Sie dieselben CSS-Selektoren verwenden, die das Wufoo-Standard-Stylesheet verwendet.

Hier weitere Informationen über benutzerdefinierte CSS für Wufoo:

Using Custom CSS to Style Your Forms & Reports

Custom CSS for Wufoo

Hier weitere Informationen über Iframes ist bei Bedarf: Applying CSS to an IFrame

hoffe, das hilft