如何使事件管理器 table（在 wordpress 中）在移动设备上响应？与媒体查询？

Question

我是开发的初学者，我正在研究 Wordpress 练习，更准确地说是事件管理器 table。

在电脑上观看效果不错，但在手机版上，我的table不太合适，它从手机屏幕上出来了。我想调整我的 table 以使其更美观。我找到了一个插件来修复它，但我被要求使用媒体查询。（我的网站：http://quentin-civiale.fr/activites-du-mois/）

你有解决方案（css 代码）来帮助我吗？

PS：对不起我的英语我是法国人 ;-)

Answer 1

W3school 提供了对媒体查询的良好基本理解。

尝试使用@media 为父 class 或 id 提供 100% 的宽度。

@media only screen and (max-width: 500px) {
body {
    width: 100%;
}

Answer 2

我用这段代码解决了问题：

@media screen and (max-device-width: 980px)
    {
       th
          {display: none;}
       tr
          {display: flex; flex-direction: column;}
       td
          {display: flex; flex-direction: column;}

    }

感谢您的帮助！

如何使事件管理器 table（在 wordpress 中）在移动设备上响应？与媒体查询？

How to make an event manager table (in wordpress) responsive on mobile ? with Media Queries?

wordpress

events

media-queries

responsive