css - 如何使用 CSS 使自定义嵌入代码响应

Question

我需要将来自外部网站的自定义嵌入代码嵌入到我的 wordpress 博客文章中。

自定义嵌入代码格式如下:

<!-- TradingView Chart BEGIN -->
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
var tradingview_embed_options = {};
tradingview_embed_options.width = '640';
tradingview_embed_options.height = '400';
tradingview_embed_options.chart = 'z1zThvGU';
new TradingView.chart(tradingview_embed_options);
</script>
<p><a href="https://www.tradingview.com/chart/GBPUSD/z1zThvGU-GBPUSD-Forecast-on-H4/">GBPUSD, Forecast on H4.</a> by <a href="https://www.tradingview.com/u/DatTong/">DatTong</a> on <a href="https://www.tradingview.com/">TradingView.com</a></p>
<!-- TradingView Chart END -->

该代码工作正常，但在移动设备或表格中查看时响应不完全，并且在桌面中也不居中。可能是因为代码生成了固定宽度和固定高度。

但这就是问题所在。我需要覆盖嵌入代码样式，以便我可以根据需要设置样式。

我尝试了很多选项，但都不起作用。我还检查了 DOM，发现生成了一个包装 div，但是当尝试设置生成的包装 div 的样式时，它仍然无法正常工作。我做的另一个选择是手动将代码包装在 wordpress 编辑器中，希望我可以控制宽度和高度，但仍然无法正常工作。尽管即使它有效，在每篇博文中手动设置样式也不是一个好主意，所以如果我们可以使用自定义样式表覆盖它，那就太好了。

见下面的 fiddle :

http://jsfiddle.net/7695akjh/8/

关于如何使此代码完全响应的任何想法？

Answer 1

在摆弄标记之后，我终于弄明白了!所以这就解决了。