0

我在这个问题上苦苦挣扎的时间比我关心的要长得多，而且我似乎无法解决这个问题。我正在使用 Wufoo Forms，只是想在各种屏幕尺寸上直观地居中，并使用媒体查询来尝试实现这一点。

要实时查看问题，请访问storanddeliver.com，您会在主页上看到表格。

我已经多次重写了这些，并将它们与 Stack 上的其他答案进行了比较，我似乎找不到任何语法问题，但由于某种原因它们仍然不起作用......（智能手机是唯一有效的在所有屏幕尺寸上）。感谢所有的帮助！

以下是我的媒体查询。（媒体查询在 2017 年 5 月 12 日 15:55 语法更新）

/* 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;
  }
}

另外，我只想区分一下。虽然 Wufoo 表单是通过 iframe 提供的，但它在屏幕调整大小和遇到不同屏幕尺寸期间应该应用的所有 CSS 都来自通过我在 Wufoo 的帐户上传的自定义 CSS 文件......不确定这些额外信息是否有帮助，但只是想确保这是已知的。

完整的 CSS 文件可以在这里找到： https ://www.dropbox.com/s/xc61w4m35nefbyr/wufoo%20%281%29.css?dl=0

4

1 回答 1

0

看起来您正在尝试向 iframed 表单添加样式。您需要确保使用与 Wufoo 默认样式表相同的 CSS 选择器。

以下是有关 Wufoo 的自定义 CSS 的更多信息：

使用自定义 CSS 设置表单和报告的样式

Wufoo 的自定义 CSS

如果需要，以下是有关 iframe 的更多信息： 将 CSS 应用于 IFrame

希望这可以帮助

于 2017-05-12T18:42:13.653 回答