css - 1. Unterkategorie Desktop und Handy gleiche Selektoren?

[mona]

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

 

[Eugen Fritzler]

Guten Morgen @mona,

du musst in der CSS-Datei nach @media (max-width: 991px) gucken. Dieses ist für die Mobile Ansicht.

 

[mona]

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

 

[Eugen Fritzler]

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]

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