Auf Handy 2 Symbole nebeneinander?

[stobi_de]

https://www.pfrommer-gmbh.de/tga/

Da stehe ich doch gerade etwas auf dem Schlauch.
Auf einem Handy sollen von den oberen 4 Symbolen 2 nebeneinander angezeigt werden.

[Tommy Herrmann]

Moin,

welcher Block ist das aus welchem Thema.

Normalerweise sollte das doch mit der Angabe von "col" direkt am <div> funktionieren.

https://getbootstrap.com/docs/5.0/layou ... id-options

[stobi_de]

Ha ha, meinst Du, dann würde ich Dich fragen
Es ist irgendwo in diesen Zeilen CSS versteckt.
Firefox Debugger:
Bei width=50% gibt es auf dem Handy 2 Spalten, aber das Icon verkleinert sich beliebig.

Code: Alles auswählen

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x)/ 2);
  padding-left: calc(var(--bs-gutter-x)/ 2);
  margin-top: var(--bs-gutter-y);
}

[Tommy Herrmann]

Hast Du schon mit:

max-width: 50%;

versucht?

Code: Alles auswählen

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 50%;
  padding-right: calc(var(--bs-gutter-x)/ 2);
  padding-left: calc(var(--bs-gutter-x)/ 2);
  margin-top: var(--bs-gutter-y);
}

[stobi_de]

Dann haben wir IMMER 2 Spalten, auch auf dem Monitor.
Ich habe das ganze Konstrukt irgendwie nicht begriffen.
Was machen die Col-6 da, wenn sie keine Auswirkung haben?

[Tommy Herrmann]

... und - geht das nicht über @media zu lösen?

Das ist ein wenig kompliziert und man muss sich das ziemlich oft angucken, um das Grid-System zu verstehen.

Für andere, die sich noch nicht so gut mit Mobirise auskennen, das Video ist schon älter und zeigt noch "Mobirise3" mit dem ganz alten "Code Editor". Das Grid-System von Bootstrap wird aber sehr gut erklärt und hat sich auch nicht geändert.



Hier hatte ich das auch mal kurz angerissen:

https://www.mobirise-tutorials.com/Tuto ... -Grid.html

[stobi_de]

Das mit dem Grid ist ja keine Sache, aber wenn es mit Gutter anfängt, stehe ich noch auf dem Schlauch.
Irgendwie widerspricht sich das ja

[Tommy Herrmann]

Moin,


keiner hat gesagt, dass Bootstrap einfach zu verstehen ist


Default Breakpoints von Bootstrap:

col-6 bedeutet doch nur, dass ein Container 6 Columns (Spalten) aus 12 verwenden darf. Wie viele dann wirklich verwendet werden wird doch mit den Grid - Breakpoints bestimmt.

col-md-6 (medium) würde dagegen nur 6 Spalten ab einer Medienbreite von 768px verwenden, zuvor 12 Spalten.
col-lg-6 (large) eben erst 6 Spalten von 12 ab eine Medienbreite von 992px, zuvor 12 Spalten.

Variablen und Maps bestimmen die Anzahl der Spalten, die Abstandsbreite und den Medienabfragepunkt, ab dem die Spalten angeordnet werden sollen. Wir verwenden diese, um die oben dokumentierten vordefinierten Rasterklassen zu generieren, sowie für die benutzerdefinierten Mixins, die unten aufgeführt sind.

Code: Alles auswählen

$grid-columns:      12;
$grid-gutter-width: 1.5rem;


$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Unser Raster unterstützt sechs responsive Breakpoints. Die Breakpoints basieren auf Mindestbreite-Media-Queries, was bedeutet, dass sie diesen Breakpoint und alle darüber liegenden beeinflussen (z.B. .col-sm-4 gilt für sm, md, lg, xl und xxl). Das bedeutet, dass Sie die Größenanpassung und das Verhalten von Containern und Spalten für jeden Breakpoint steuern können.

Gutters sind dagegen doch nur die Abstände zwischen den Spalten. Das ist doch etwas ganz anderes und kann sich daher auch nicht widersprechen.

https://getbootstrap.com/docs/5.0/layout/gutters/

Die Abstände zwischen den Spalteninhalten werden als "Gutters" bezeichnet und entstehen durch horizontales Padding. Wir setzen padding-right und padding-left auf jede Spalte und verwenden negative Margin, um dies am Anfang und Ende jeder Zeile auszugleichen und den Inhalt auszurichten.

… aber ohne das Thema und den ganz genauen Block zu kennen, ist es ja nicht wirklich möglich das mal selbst zu probieren, um eventuell helfen zu können.

[Tommy Herrmann]

Was ich gerade so gar nicht verstehe ist, wenn ich bei der class="row" diese 50% (anstatt 100%) für max-width in den Browser-Werkzeugen eintrage, stehen genau 2 Bilder am kleinen Display nebeneinander - so wie bereits von mir oben beschrieben

Eben genau so, wie von Dir gewünscht. Das muss doch dann auch bei Dir so funktionieren

Hier mein Ergebnis, wenn ich den Browser auf das Minimum zusammen schiebe:


Nachher:

Vorher:



Ohne diese Änderung, stehen alle Bilder in voller Breite von 100% am selben Display untereinander:

[stobi_de]

Moment, ich schau nochmal.
waäre ja nicht das erste Mal, dass ich in css einen Buchstabe verwechsel und dann tagelang danach suche.


Hast Du Deine Anweisung oben mal im Codeedi eingetragen?

Code: Alles auswählen

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 50%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

Das klappt nämlich nicht. Die Calc und Gutter-Angaben führen zu einem Edi-Error. (Operation of an invalid type)
Ohne die Gutters kann es eingetragen werden, führt aber dazu, dass immer 2 Cols angezeigt werden, auch auf dem PC.

Der Debugger schluckt das zwar, aber auch keiner der anderen Editoren in Mobi übernimmt das fehlerfrei.

[Tommy Herrmann]

na denn - musst Du weiter suchen

Was für ein Thema und Block ist das denn? Die CSS kommt mir ganz fremd vor für Mobirise ...

[stobi_de]

Das ist ein ganz normaler Features Block aus StartM5.
Den CSS-Code habe ich aus Firefox-Debugger.

[Tommy Herrmann]

noch ein Versuch, ich bin heute Vormittag ohnehin gleich weg zu allen möglichen Terminen.

Schreibe diese CSS mal noch zum Block hinzu, vielleicht verhält es sich dann anders:

Code: Alles auswählen

.item.features-image.сol-6.col-md-6.col-lg-3 {
  max-width: 50%;
}

[stobi_de]

So klappt das.
Findet man aber nur im Debugger, steht direkt in Mobi nix zu drin.

Code: Alles auswählen

@media (max-width: 768px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .item-img {
    padding: 1rem 0 0 0 !important;
    img {
      min-width: 100px!important;
    }
  }
}

[Tommy Herrmann]

also jetzt wo ich weiß um welchen Block es geht, war das ganz einfach:

Code: Alles auswählen

@media (max-width: 767px) {
  .features-image {
    max-width: 50%!important;
  }
}

… wenn es dann dieser Block auch bei Dir ist.

Block aus "StartM5":

[stobi_de]

Nee, nicht so ganz.
Wenn ich das so eintrage, wird das Bild winzig

"_name": "features3",
"_sourceTheme": "mobirise5",

[Tommy Herrmann]

Hier habe ich das auch mal ausprobiert und mit meiner CSS geändert:

https://www.mobirise-tutorials.com/Star ... atures03-g

CSS:

Code: Alles auswählen

@media (max-width: 767px) {
  .features-image {
    max-width: 50%!important;
  }
}

Bleibt bei mir alles richtig. Gucke auch am Handy.

[Tommy Herrmann]

Nee, nicht so ganz.
Wenn ich das so eintrage, wird das Bild winzig

"_name": "features3",
"_sourceTheme": "mobirise5",

Moin,

nur noch als Nachtrag.

Diese CSS:

Code: Alles auswählen

@media (max-width: 767px) {
  .features-image {
    max-width: 50%!important;
  }
}

... funktioniert übrigens mit jedem dieser "Feature" Image-Blöcke ebenso, also z.B. auch aus dem Standard-Thema "Mobirise5" und dem Block "features3". Also auch ganz genau mit diesem Block, den Du nun oben angegeben hast - habe ich gerade noch getestet.

[Tommy Herrmann]

Habe jetzt Deine CSS auch noch mal probiert und verstehe nicht ganz, was Du da gemacht hast?

Aus Deiner CSS reicht es doch auch so:

Code: Alles auswählen

@media (max-width: 768px) {
  .col-md-6 {
    width: 50%;
  }
}

oder eben meine Variante.

Ich experimentiere nur so viel herum, weil ich diese Lösung wirklich gut finde und mir nicht bekannt ist, dass es diese Lösung bereits in einem der Mobirise Blöcke gibt. Vielleicht sollte man das beim Support mal anregen.

[stobi_de]

unsere Lösungen sind doch völlig gleich.
Ich habe nur noch überflüssigerweise das "flex: 0 0 auto;" was sowieso drin ist.
Hatte damit das rumgespielt.