css - 1. Unterkategorie Desktop und Handy gleiche Selektoren?

mona

Gut bekanntes Mitglied
26. April 2016
241
15
Hallo

Ich versuche verzweifelt, die 1. Unterkategorie (rotes Gekritzel) für mobile Ansicht anders zu gestalten, als die 1. Unterkategorie für die Desktopansicht.

Beide haben aber die <div class="nav-mobile-body"> "rundherum" und ich finde keine Selektoren, die mir eine Unterscheidung möglich machen.
Ich möchte, dass auf dem Handy die 1. Unterkategorie über die ganze Breite angezeigt wird. (rote Pfeile rechts...die Titel der 1. Unterkategorien haben so nicht Platz....) und dass nicht noch einen Teil der Hauptkategorie sichtbar ist...

Wenn ich aber hier etwas ändere, verändert es mir die Desktopansicht ebenfalls.... ich hab schon etliche classes ausprobiert und etliche Stunden auch.... Vielleicht weiss jemand Rat? Lieben Dank & Gruss mona
1647276116304.png
 

mona

Gut bekanntes Mitglied
26. April 2016
241
15
Hallo Eugen

Danke für Deine Inspiration. Ich habe nun meine custom.css erweitert: Was mich jetzt aber unsicher macht, ist 991px wirklich für mobile Ansicht? Dachte eher für Tablets?

/*Handy Korrektur Position 1. Untermenu welches nach Klick auf Hauptmenu nicht mittig und in voller Breite angezeigt wird*/
@media (max-width: 991px) {
div.navbar-collapse.nav-scrollbar.collapse {max-width:980px; min-width:fit-content;}
div.col.nav-item { background-color:#f5f5f5; margin:0 0 0 -3em;}
.col.nav-item span {overflow:visible;}
}



Lieben Dank & Gruss
mona
 
Zuletzt bearbeitet:

EFritzler

Mitglied
Mitarbeiter
1. März 2022
61
17
Hallo Eugen

Danke für Deine Inspiration. Ich habe nun meine custom.css erweitert: Was mich jetzt aber unsicher macht, ist 991px wirklich für mobile Ansicht? Dachte eher für Tablets?

/*Handy Korrektur Position 1. Untermenu welches nach Klick auf Hauptmenu nicht mittig und in voller Breite angezeigt wird*/
@media (max-width: 991px) {
div.navbar-collapse.nav-scrollbar.collapse {max-width:980px; min-width:fit-content;}
div.col.nav-item { background-color:#f5f5f5; margin:0 0 0 -3em;}
.col.nav-item span {overflow:visible;}
}



Lieben Dank & Gruss
mona
Du kannst gerne die "px" Angabe auch kleiner gestalten. Ab 991px beginnt die Mobile Ansicht. Tablets gehören auch schon dazu.
Mit dem CSS-Befehl "margin-left / margin-right" kannst du den abstand von links / rechts bestimmen.
 

mona

Gut bekanntes Mitglied
26. April 2016
241
15
Okay - danke für Deine Antwort. Ich belasse es bei den 991px.

Betreffend Abstand, da nehme ich lieber nur "margin" und zeige mir die Ränder verhältnismässig an, nicht mit fixen Pixeln ;)

gruss & Dank
mona