Obere Menüleiste (menu.html) - Größe der Icons / Höhe des Menüs

[Morg]

Hallo,

in der Suche habe ich noch nichts passendes gefunden, bestimmt weiß von euch jemand da auf Anhieb bescheid:

Wenn ich in der menu.html mehr als 5 Icons einsetze, wird die "Leiste" auf kleinen Geräten (Smartphone) umgebrochen und überlappt mit der darunter liegenden Seite.

Gibt es eine Möglichkeit,

a) die Icons kleiner darzustellen oder die Leiste zu vergrößern

b) das nur / automatisch zu machen, wenn die Bildschirmgröße < x Pixeln ist?

Gruß
Sebastian

[martinb07]

Such mal im Web nach "CSS Media Queries".

So könnte es mit den kleineren Icons funktionieren (ungetestet):

/*small icons for smaller displays */
@media all and (max-width: 320px) {
.menu .ui-link img.icon {
width: 32px;
height: 32px;
padding: 8px 0px;
}
}

Meinst du mit "Leiste zu vergrößern" die Leiste in der Höhe einfach zu verdoppeln?

[ErKi]

Hallo Sebastian,

ich habe mir damals aus der CSS Datei des Quad Design von 2ndsky die Zeilen 442 bis Ende in meine Projekt CSS eingefügt und dadurch kann ich am Handy genügend Menu Punkte unterbringen.
Hier zur CSS: https://github.com/2ndsky/quad/blob/master/visu.css

Mit freundlichen Grüßen,
Erik

[Sandman60]

Hi Erik,
klinke mich hier mal ein da mich das Thema des TE auch schon lange drückt...

Erst mal danke für den Tipp. Ich habe in meinem Projekt gegenwärtig kein eigenes css und verwende dann wohl nur base.

Meine Frage ist nun ob ich die Base.css nun in mein Projekt kopieren muß und die Zeilen dann hinzufügen oder lege ich nur ein neues File an mit den entsprechenden Files?
VG,
Oliver

[Orion]

Hallo Oliver,

einfach nur eine neue visu.css ins pages Verzeichnis mit Deinen Einstellungen. Der Rest bleibt.

Michel

[Sandman60]

Oki, also Vererbung. Werde es probieren. Danke!