Position der Einleitungsbilder nicht mehr steuerbar

hrybak · 24. Mai 2022

Hallo,

nach dem Update auf 4.1.3 kann ich nicht mehr frei steuern, ob ein Einleitungsbild über oder neben der Überchrift steht.

Die folgende Anweisung funktioniert nur oberhalb 992 px.

Code

@media only screen and (min-width: 1181px) and (max-width: 991px),(min-width: 631px) {
  .image-right .blog-item .item-image {
    margin: 0.4em 0 0.2em 1em;
    flex: 1 1 40%;
  }
}

Unterhalb 992px wird das Bild immer über die Überschrift geschoben. Die obige Anweisung bleibt ohen Wirkung, wird aber im Inspektor als aktiv angezeigt.

Auf der anderen Seite kann ich oberhalb 992 px das Einleitungsbild nicht mehr über die Überschrift setzen. Bisher hat das Folgendes einwandfrei funktioniert

CSS

@media only screen and (max-width: 1180px) and (min-width: 992px), (max-width: 630px) {
  .blog-item figure.item-image {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    width: 100%;
    max-width: 390px !important;
  }
}

Hier bleibt das Einleitungsbild grundsätzlich auf der rechten Seite, sollte aber im Bereich zwischen 992 und 1180px über der Überschrift stehen, da es dann neben dem Text zu klein wird (ist halt spezifisch für unsere Webeite).

Was ist hier die Ursache.? Im Inspektor habe ich leider nichts gefunden, was hier entsprechende Einstellungen definiert.

Stef · 24. Mai 2022

Hallo,

Heute kommt die Version 4.1.4 , vielleicht ist es dann besser.

hrybak · 24. Mai 2022

Auch hier hat sich keine positive Veränderung ergeben.

Re:Later · 24. Mai 2022

Zur ersten Anweisung: Ich kann nur mutmaßen, was du vorhast und schätze mal du meinst Cassiopeia mit Blog-Ansicht.

Generell muss man bei diesem ganzen Flex- und/oder Grid-Gedöns auch immer die umliegenden Container anschauen, die ja auch @media-Anweisungen haben können.

Weiters hat dann das figure auch noch ein order: 1, was das Bild unter den Text schiebt.

Da mir das mit den 631px ohne Seitenlink nicht klar ist, hab ich das @media umgeschrieben. Kannst ja dann selber wieder rumprobieren/umstellen.

Code

@media only screen and  ((min-width: 631px) and (max-width: 991px)), (min-width: 1181px)
{
  .image-right .blog-item figure.item-image {
    flex: none;
    order: unset;
  }

  .image-right .blog-item
  {
    flex-direction: column;
  }
}

Alles anzeigen

drmenzelit · 25. Mai 2022

Ich verstehe das Problem nicht ganz. Ohne Link zur Seite und ohne die Konfiguration vom Bloglayout zu kennen, kann man nicht richtig helfen.

Diese Media Query ist nicht von Cassiopeia, float wird bei beim Bloglayout nicht verwendet, nur bei Full Image in Beiträgen, aber nur, wenn man die entsprechende Klasse gesezt hat.

hrybak · 25. Mai 2022

Zitat von Re:Later

Kannst ja dann selber wieder rumprobieren/umstellen.

Das war die Lösung. Vielen Dank dafür.

So ganz genau kann ich die dahinterliegenden Wirkmechanismen noch nicht nachvollziehen, aber das wird auch noch.

Und wieso hat es vorher ohne diese Ergänzung funktioniert?