html - 移动响应列

Question

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

移动 View

桌面 View 1

桌面 View 2

无论我做什么，它总是要么太大要么太小。我把它放在一个

<div class="twitterContainer">

因为 Twitter 提要不断溢出边界。

我已经尝试过在这个答案中看到的媒体查询

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 中。移除内部容器并将 2 个类放在 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>