Question

在页面http://project.dreamo.ee/lennumaa/wordpress/上：

左下角tawk.to聊天栏的宽度是自动的;由于某些原因。我希望它是320px。

我已经尝试过！在每个css文件中都很重要（＃tawkchat-minified-container {width：320px！important}），自定义css插件，确保tawk.to网站上的插件外观宽度为320px，但仍然是由于某种原因有宽度：自动。

当我在google调试器上编辑宽度时，它可以正常工作，但我需要它保持这样...

有趣的是，有时它是320px，有时它会全宽。在此期间甚至没有改变任何东西。

这对我来说似乎很奇怪，我无法弄清楚这背后的问题是什么。

提前致谢!!

Answer 1

如果您无法编辑iframe CSS 本身，请将width应用于父iframe。

#tawkchat-minified-iframe-element {
   width: 320px !important;
}

或直接编辑 HTML ，因为CSS是内联编写的：

<iframe id="tawkchat-minified-iframe-element" src="about:blank" frameborder="0" scrolling="no" class="" style="width: 320px;max-width: 100%;outline: none !important;visibility: visible !important;resize: none !important;box-shadow: none !important;overflow: visible !important;opacity: 1 !important;position: fixed !important;border: 0px !important;padding: 0px !important;transition-property: none !important;z-index: 1000001 !important;cursor: auto !important;float: none !important;height: 40px !important;min-height: 40px !important;max-height: 40px !important;min-width: 320px !important;transform: rotate(0deg) translateZ(0px) !important;transform-origin: 0px center 0px !important;margin: 0px !important;top: auto !important;bottom: 0px !important;left: 10px !important;right: auto !important;display: block !important;background: none transparent !important;"></iframe>

#tawkchat-minified-container不相关，因为它位于iframe内，不会继承WordPress主题的常规CSS / JS代码。

P.S这里有很多不必要的代码，请尝试清理它。

Answer 2

添加此脚本

<script type="text/javascript">
  $( document ).ready(function() {
    jQuery("#tawkchat-minified-iframe-element").css("width","320px");
  });
</script>

威盛CSS：

#tawkchat-minified-iframe-element, #tawkchat-minified-iframe-element html, #tawkchat-minified-iframe-element body {
    width: 320px !important;
}

有些东西阻止我覆盖css

2 个答案: