Media Queries auf Joomla 3 funktioniert nicht plötzlich

Question

Aus irgendeinem Grund hat meine Joomla 3-Website (mit dem Protostar-Template) Medienabfragen, die einfach nicht mehr funktionieren. Ein spezifisches Beispiel befindet sich unter this page. Wenn Sie die Seite auf Ihrem Telefon anzeigen, soll das große Bus-Bild auf der Seite auf den darunter liegenden Text "stapeln", sobald das Fenster 599px oder weniger erreicht.

Was ist seltsam ist, Dinge wie diese funktionierten, dann hörte plötzlich auf zu arbeiten. Ich versuchte herauszufinden, was ohne Glück schief gelaufen sein könnte.

Hier ist mein CSS-Code, der die Medienabfragen enthält. Ich habe es einfach alle in der template.css Datei:

.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; 
    } 

    } 

ich nur den Code enthalten, die ich hinzugefügt, der Rest Grund CSS aus der Vorlage (Protostar), die mit Farben geändert werden kann, etc- aber das ist alles.

Jede Hilfe, die Sie zur Verfügung stellen können, wird sehr geschätzt! Vielen Dank.

Answer 1

Sie haben einen Tippfehler vor der Abfrage Medien (eine zusätzliche geschweifte Klammer ...):

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