Responsive Design - Frage zu Media-Queries und CSs

27.03.2014 13:32 Uhr

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

 

 

2 Antworten

#1

02.04.2014 18:05 Uhr

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

#2

04.04.2014 09:52 Uhr

Hi,

 

thanks. I found my mistake. I inserted a 

;before !important

Ähnliche Fragen

Datenschutzerklärung · Impressum