模块大小的CSS（类似于@media）？

我有一个Joomla模块，我试图对不同的屏幕大小保持响应，但显示和隐藏列。这在整页显示上效果很好

@media (max-width: 800px) {
    .team_name { display:none; }
    .team_abbr { display:inline-block;}
    .overall { display: inline-block;}
    .divisional { display:inline-block;}
    .wide { display:none;}
    #btn_row { display:inline-block;}
    #div_split { display:none;}
}

@media screen and (min-width: 800px) {
    .team_name { display: inline-block; }
    .team_abbr { display:none;}
    .overall { display: inline-block;}
    .divisional { display:inline-block;}
    .wide { display:inline-block;}
    #btn_row { display:none;}
    #div_split ( display:inline-block;)
}

但现在我的挑战是，我希望在另一个页面中使用相同的页面/模块作为模块位置（只有大约200像素宽）

是否有一个类似于@media的CSS命令可以获得模块宽度而不是模块所在的整个页面宽度

---

提前感谢…

一种方法是向模块中添加一个类，然后相对于其父模块（即模块）调整模块中元素的大小

（1） 首先转到要处理的模块>高级选项卡>模块类后缀

（2） 添加一个类并记住在开始处包含空格，例如“我的模块类”

（3） 最后，调整模块元素相对于模块的大小，例如

@media (max-width: 800px) {

    .team_abbr { 
       ...
       width:50%;
     }  
}

祝你好运，我希望这有帮助