Auf Handy 2 Symbole nebeneinander?
Auf Handy 2 Symbole nebeneinander?
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.
Da stehe ich doch gerade etwas auf dem Schlauch.
Auf einem Handy sollen von den oberen 4 Symbolen 2 nebeneinander angezeigt werden.
- Tommy Herrmann
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
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
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
Re: Auf Handy 2 Symbole nebeneinander?
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.
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
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
Hast Du schon mit:
max-width: 50%;
versucht?
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);
}
Re: Auf Handy 2 Symbole nebeneinander?
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?
Ich habe das ganze Konstrukt irgendwie nicht begriffen.
Was machen die Col-6 da, wenn sie keine Auswirkung haben?
- Tommy Herrmann
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
... 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
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
Re: Auf Handy 2 Symbole nebeneinander?
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
Irgendwie widerspricht sich das ja
- Tommy Herrmann
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
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.
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/
… 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.
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.
Bootstrap hat geschrieben:
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/
Bootstrap hat geschrieben:
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
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
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:
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:
Re: Auf Handy 2 Symbole nebeneinander?
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?
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.
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);
}
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
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
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 ...
Was für ein Thema und Block ist das denn? Die CSS kommt mir ganz fremd vor für Mobirise ...
Re: Auf Handy 2 Symbole nebeneinander?
Das ist ein ganz normaler Features Block aus StartM5.
Den CSS-Code habe ich aus Firefox-Debugger.
Den CSS-Code habe ich aus Firefox-Debugger.
- Tommy Herrmann
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
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:
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%;
}
Re: Auf Handy 2 Symbole nebeneinander?
So klappt das.
Findet man aber nur im Debugger, steht direkt in Mobi nix zu drin.
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
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
also jetzt wo ich weiß um welchen Block es geht, war das ganz einfach:
… wenn es dann dieser Block auch bei Dir ist.
Block aus "StartM5":
Code: Alles auswählen
@media (max-width: 767px) {
.features-image {
max-width: 50%!important;
}
}
Block aus "StartM5":
Re: Auf Handy 2 Symbole nebeneinander?
Nee, nicht so ganz.
Wenn ich das so eintrage, wird das Bild winzig
"_name": "features3",
"_sourceTheme": "mobirise5",
Wenn ich das so eintrage, wird das Bild winzig
"_name": "features3",
"_sourceTheme": "mobirise5",
- Tommy Herrmann
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
Hier habe ich das auch mal ausprobiert und mit meiner CSS geändert:
https://www.mobirise-tutorials.com/Star ... atures03-g
CSS:
Bleibt bei mir alles richtig. Gucke auch am Handy.
https://www.mobirise-tutorials.com/Star ... atures03-g
CSS:
Code: Alles auswählen
@media (max-width: 767px) {
.features-image {
max-width: 50%!important;
}
}
- Tommy Herrmann
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
Moin,
nur noch als Nachtrag.
Diese CSS:
Code: Alles auswählen
@media (max-width: 767px) {
.features-image {
max-width: 50%!important;
}
}
- Tommy Herrmann
- Site Admin
- Beiträge: 5983
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Auf Handy 2 Symbole nebeneinander?
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:
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.
Aus Deiner CSS reicht es doch auch so:
Code: Alles auswählen
@media (max-width: 768px) {
.col-md-6 {
width: 50%;
}
}
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.
Re: Auf Handy 2 Symbole nebeneinander?
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.
Ich habe nur noch überflüssigerweise das "flex: 0 0 auto;" was sowieso drin ist.
Hatte damit das rumgespielt.
Wer ist online?
Mitglieder in diesem Forum: Ahrefs [Bot], Semrush [Bot] und 2 Gäste