移动响应列

Question

我在html中创建了3列。这一切看起来都不错，但是当浏览器缩小尺寸或在移动设备上观看时，嵌入Twitter的列不会保持相同的大小。

移动视图

桌面视图1

桌面视图2

无论我做什么，它总是太大或太小。我有一个

<div class="twitterContainer">

因为推特信息不断溢出边境。

我已经尝试过媒体查询，如本答案所示

Stack Answer

这是我的最新代码：

<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->
<div class="column">
<div class="wp-block-column"><!-- wp:heading -->
<h2>News</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":482,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><a href="http://www.patricianprimaryschool.ie/home/newsletter/"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/Newsletter.png" alt="" class="wp-image-482"/></a> . 
</figure></div>
<!-- /wp:image --></div>
        <!-- /wp:column --></div>

<!-- wp:column -->
<div class="column">
<div class="wp-block-column">
<!-- wp:heading -->
<h2>Calendar</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":481,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><a href="http://www.patricianprimaryschool.ie/home/school-calender/"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/SchoolCalendar-01-1024x1024.png" alt="" class="wp-image-481"/></a></figure></div>
<!-- /wp:image --></div>
        <!-- /wp:column --></div>

<div class="column">
<div class="twitterContainer">
<!-- wp:column -->

<div class="wp-block-column"><!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->

<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html --></div>
<!-- /wp:column --></div></div>
</div>
</div>
<!-- /wp:columns -->

*编辑CSS已添加

.wp-block-columns {
margin: 112px;
}

.wp-block-column {
border: 2px solid #354063;
padding: 2px 10px;
}

我究竟做错了什么？ TIA

**编辑

Answer 1

好。所以你在你的wp-block-column里面有你的twitterContainer。删除内部容器并将2个类放在一个div中。

所以这：

<div class="twitterContainer">
<!-- wp:column -->

<div class="wp-block-column"><!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->

<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html --></div>
<!-- /wp:column --></div>

变成这样：

<div class="wp-block-column twitterContainer">
<!-- wp:column -->

<!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->

<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html -->
<!-- /wp:column --></div>