2016-08-08 51 views
0

由於某種原因,我的Joomla 3網站(使用Protostar模板)有媒體查詢,只是不工作了。具體示例位於this page。如果您在手機上查看該頁面,一旦窗口達到599像素或更少,頁面上的大型總線圖像應該「堆疊」在其下面的文本中。Joomla 3的媒體查詢不工作突然

奇怪的是,像這樣的事情正在工作,然後突然停止工作。我試圖找出沒有運氣的情況下會出現什麼問題。

這是我的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; 
    } 

    } 

我只包括我加入的代碼,其餘爲從模板(原恆星)可以使用的顏色,etc-但可以修改基本的CSS就是這樣。

任何幫助,您可以提供將不勝感激!謝謝。

回答

3

您有媒體查詢前一個錯字(一個額外的大括號...):

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

你是最好的。完全錯過了。 –