Question

当浏览器面临不同的屏幕尺寸时，我试图让我的pdfs / mp3s / mp4s的编码按钮不以非对称方式堆叠在一起。例如，当屏幕大小从大约1200px宽的大型桌面变为1024px到768px的平板电脑（横向/纵向）时，按钮会以看起来低效/无意的方式相互堆叠。你自己看： http://www.mannachurch.org/portfolio-type/insights-from-the-bottom-bunk/

尝试将浏览器移动到适合13英寸或平板电脑的东西，你明白我的意思。这只是按钮，其他一切看起来都很好。

我尝试在header.php文件中的wordpress网站上使用此媒体查询代码解决此问题：

 /* iPhones ----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px){
    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
}
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
    } 
}

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 

}

@media all and (min-width: 250px) and (max-width: 400px) {

    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 
}


  /* iPad in landscape----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 
    }

   /* iPad in portrait----------- */
   @media only screen and (min-device-width : 768px) and (max-device-width :     1024px) and (orientation : portrait){
    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 
}



 /*Larger screens -----------*/
 @media only screen and (min-width : 1024px) and (max-width: 1224px)  {
    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 
}

它不会让那些按钮做任何不同的事情!!

我做错了什么？ Wordpress令人沮丧，因为它与无尽的CSS文件堆叠在一起。但是我一直在想看看为什么我不能抓住这些并让它们与媒体查询一起工作。我非常确定我的声明是正确的。有什么建议吗？

Answer 1

省略CSS声明中的空格，例如a.btn.pull-left。

Answer 2

所有wordpress主题都带有自己的style.css文件。而不是将CSS放在php文件（header.php）中，您应该编辑.css文件。您的按钮覆盖应该在那里工作。

如果在编辑器中编辑style.css感觉不舒服，大多数主题在主题选项中也有自己的自定义css字段。但这是一回事。

CSS媒体查询无法在Wordpress网站

2 个答案: