Joomla 3 上的媒体查询突然不工作

Question

出于某种原因，我的 Joomla 3 网站（使用 Protostar 模板）的媒体查询不再有效。具体示例位于 this page。如果您在 phone 上查看页面，一旦 window 达到 599px 或更小，页面上的大巴士图像应该 "stack" 在其下方的文本上。

奇怪的是像这样的东西在工作，然后突然停止工作。我试图找出可能出了什么问题，但运气不好。

这是我的 CSS 代码，其中包含媒体查询。我只是把它全部放在 template.css 文件中：

.bustype{width:206px;
height:296px;
border:2px solid black;
margin-right:10px;
  margin-left:10px;
margin-bottom:25px;
display:inline-block;
padding:5px
}
#bustypewrap{
width:100%;
margin:auto;
text-align:center;}

.busimage{
    width:45%;
    margin-left:5%;
    float:left}
 .buscopy{
     width:40%;
     float:right;
     text-align:justify}
  .clearitall{
      clear:both;}

.footerbb{
    width:100%;
    padding:15px;
  margin-top:20px;
    text-align:center;
    background-color:#00467e;
    color:#fff;}
.spectable{
  display:block;
}
.spectablemobile{
  display:none;
}
  .mobilelogo{
    display:none;
  }

.buttonblue, .buttonblue:hover {
font-size:18px;
  a{color:#fff;}
  a:hover{color:#fff;}
    background-color: #1d78cb;
    -webkit-box-shadow: 0px 3px 0px 0px #0f3e68;
    -moz-box-shadow: 0px 3px 0px 0px #0f3e68;
    box-shadow: 0px 3px 0px 0px #0f3e68;
}
.mobilebanner{display:none;}
.popupimagesbuses{
float:left;
margin:10px;}
}
@media only screen and (max-device-width: 599px) {
  .spectablemobile{
    display:block;
  }
  .spectable{
    display:none;
  }

  .busimage{
    width:100%;
    }
 .buscopy{
     width:100%;
     text-align:justify}
.mobilebanner{display:block;}  
  #content{
    padding-left:10px;
    padding-right:10px;
  }
  body{
    padding-left:0px!important;
  }
}

@media only screen and (max-device-width: 979px) {
  .mobilelogo{
    display:block;
  }

    }

我只包含了我添加的代码，其余的是来自模板 (Protostar) 的基本 CSS，可以用颜色等进行修改 - 但仅此而已。

如果您能提供任何帮助，我们将不胜感激！谢谢。

Answer 1

你在媒体查询之前有一个错字（一个额外的花括号...）：

.popupimagesbuses{
float:left;
margin:10px;}
}

Joomla 3 上的媒体查询突然不工作

Media Queries on Joomla 3 Not working Suddenly

joomla

media-queries

responsive-design

joomla3.0