Responsive Design - Frage zu Media-Queries und CSs Frage Responsive Design - Frage zu Media-Queries und CSs zu Favoriten hinzufügen

Daumen hoch 0 Daumen runter

Hallo,

stelle gerade das erste Mal ein Projekt von mir auf Responsive Design um. Nun möchte ich in einem Wordpress-Template, dass im Footer die drei Widgets im Smartphone-View untereinander statt nebeneinander erscheinen (siehe media query unten). Zudem möchte ich erreichen, dass die News in der Sidebar die Schriftgröße 11px anstelle von 12px annehmen (siehe media query unten). Jedoch funktionieren diese beiden Einstellungen nicht. Das seltsame: wenn ich die Werte aus der original-css herausnehme, funktioniert es einwandfrei. Jedoch habe ich die Änderungen dann für alle Geräte/Ansichten vorgenommen, was ich natürlich nicht möchte.

Habe dazu folgende media-query angelegt:

@media (max-width: 480px) {
#footer .widget { width:100%; !important}
.rpwe-summary {font-size:11px;}
}

Das media-query hat natürlich noch weitere Einträge. Da diese jedoch funktionieren, habe ich aufgrund der Übersichtlichkeit nicht mehr erwähnt.

Link zur Homepage

Vielen Dank

Gruß,

Martin

 

 

bearbeitet am 27.03.2014

Antworten


Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

Bei Media-Queries muss man mit der Genauigkeit der CSS-Selektoren aufpassen. Die Angabe #footer .widget ist beispielsweise genauer als einfach nur .widget. Im Media-Query muss man mindestens gleich genau sein, wie die CSS-Angabe die man überschreiben möchte. Da dies nicht immer möglich ist, gibt es die Ergänzung !important, wo der Selektor dann auch allgemeiner sein darf. Allerdings stimmt Deine Schreibweise hierbei nicht:

 

#footer .widget { width:100% !important; }
Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

Hi,

 

thanks. I found my mistake. I inserted a

;before !important

Deine Antwort

Registrierter User Bereits registriert? Bitte logge dich vor dem Antworten ein.

Deine Daten