移动端响应栏

Question

我有3列创建在html中。这一切看起来都很好，但是当浏览器缩小或在移动设备上查看时，嵌入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;
}

我做错了什么？提亚

**编辑

​

​

Answer 1

好的。所以你把你的wp-block-column放在你的twitterContainer里面。移除内部容器，并将两个类放在1个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>