max-margin-left gibt's nicht

[Linuchs]

Moin,

habe gerade meine Seite auf dem Smartphone getestet und festgestellt, dass das Vereinslogo mit 100px zuviel Platz einnimmt, also

  width: 100px;
  max-width: 20%;

Nun soll der Container rechts davon aufrücken

  margin-left: 140px;
  max-margin-left: 25%;

max-margin-left gibt's aber nicht. Nun habe ich es so versucht:

@media screen and (max-width:659px) {
  #terminliste div.position div:nth-of-type(3) {
    margin-left: 25%;
  }
}
@media screen and (min-width:660px) {
  #terminliste div.position div:nth-of-type(3) {
    margin-left: 140px;
  }
}

aber FF auf dem Laptop rückt nun auch um 25% statt um 140px ein. Warum?

Linuchs

[beatovich]

hallo

Ich kann nur raten

• ctrl shift R
• eine Regel grösserer Spezifität existiert noch
• dein Selektor ist falsch

btw: auf Touchscreen geräten könnten hover menus nicht wie gewünscht funktionieren.

[Linuchs]

• eine Regel grösserer Spezifität existiert noch
• dein Selektor ist falsch

danke für den Verdacht, da habe ich genauer hingeschaut. Der Firefox 48.0 kennt den Selektor nicht und nimmt einfach den ersten. Habe sie vertauscht und nun klappt's:

@media screen and (min-width:660px) {
  #terminliste div.position div:nth-of-type(3) {
    margin-left: 140px;
  }
}
@media screen and (max-width:659px) {
  #terminliste div.position div:nth-of-type(3) {
    margin-left: 25%;
  }
}

Linuchs

[Linuchs]

Habe sie vertauscht und nun klappt's:

Nee, doch nicht. Auch das Android Smartphone nimmt stur den ersten und stzt den Rand auf 140px statt auf 25%. 140px enspricht ca. 50%

Was stimmt mit den Selektoren nicht?

@media screen and (min-width:660px) {

@media screen and (max-width:659px) {

Linuchs

[MrMurphy1]

Hallo

max-width und min-width sollten nicht vermengt werden.

Entweder nur min-width bei der Vorgehensweise mobile-first oder nur max-width bei der Vorgehensweise Desktop first.

Wobei dein Problem auch an anderer Stelle liegen kann, da habe mich mich jetzt nicht durchgewurstelt.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

max-width und min-width sollten nicht vermengt werden.

Entweder nur min-width bei der Vorgehensweise mobile-first oder nur max-width bei der Vorgehensweise Desktop first.

Wobei dein Problem auch an anderer Stelle liegen kann, da habe mich mich jetzt nicht durchgewurstelt.

Nein, dass kann man so pauschal nicht sagen. Oder kann man, dann ist es aber falsch.

Wierum man media queries verwendet

LLAP 🖖

[Matthias Apsel]

Hallo Linuchs,

Was stimmt mit den Selektoren nicht?

@media screen and (min-width:660px) {

@media screen and (max-width:659px) {

Die Angabe in px.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Linuchs

Was stimmt mit den Selektoren nicht?

@media screen and (min-width:660px) {

@media screen and (max-width:659px) {

Dass das keine Selektoren sind.

Ein Selektor ist bspw. #terminliste div.position div:nth-of-type(3). Und an dem stimmt nicht, dass dir der Kram bei der kleinsten Änderung um die Ohren fliegt.

:nt-child()/:nth-of-type() u.dgl. sind dazu geeignet, eines (oder eine Reihe) von gleichartigen Elementen zu selektieren. Verschiedenartige Geschwisterelemente durchzuzählen sollte man i.A. nicht tun.

LLAP 🖖

[Gunnar Bittersmann]

@@Linuchs

aber FF auf dem Laptop rückt nun auch um 25% statt um 140px ein.

Nein, tut er nicht.

Warum?

Die Frage lautet: Warum denkst du, Firefox würde um 25% statt um 140px einrücken?

LLAP 🖖