Business 13.3.0 — Producer Responsive — Grid — "Breakting-Point" für Wechsel von mehrspaltige in 1-spaltige Anzeige von Bildern ändern

ruster.MEDIA

Hallo liebes Zeta-Team, hallo liebe Community,

in einem Projekt habe ich 9 Bilder in 3 Zeilen à 3 Spalten eingebaut.

Ab einer bestimmten Seitenbreite werden die Bilder nicht mehr gezoomt und 3spaltig, sondern ungezoomt 1spaltig dargestellt.

Die Bilder haben teilweise lange, teilweise kurze Bildunterschriften, die beim Zoomen dann unruhig wirken, weil einige Bildunterschriften 1zeilig, andere 2zeilig sind.

Diese Seitenbreite würde ich gern ändern; der Wechsel in die 1spaltige Darstellung sollte schon ab ca. 800 Pixel erfolgen.

Ist dies möglich?

Oder kann ich per CSS die Schriftgröße aber einer bestimmten Bild-Artikel-Breite verkleinern?
Vielleicht könnte man diesen Code als neue css-Klasse ergänzen und den 9 Bildern dann diese CSS-Klasse zuweisen.

Vielen lieben Dank für Ihre/Eure Hilfe und Ideen.

Besten Dank & liebe Grüße
Sunny

Jochen

Hallo Sunny,

kannst du mal bitte eine Web-Adresse hier posten, wo man sich da ansehen und nachstellen kann?
Dann brauch man das nicht erst "nachbauen" und findet vielleicht auch schnell den passenden "kniff" > Danke

Jochen

Ok, einfach mal kurz ins "Grüne rausgeschossen", in der Hoffnung das es eine Lösung für dich wäre?

Für die "Schriftgrößenanpassung", würde folgendes funktionieren:

1: Unter Einstellungen > CSS, folgendes eintragen:

Code

<style>
@media (max-width: 800px) {
	.schriftkleiner {
	font-size: 0.5em;
}
</style>

Die Werte ggf. nach deinen Wünschen optimieren.
2: Im jeweiligen "Bild-Widget" die CSS-Klasse "schriftkleiner" eintragen.

ruster.MEDIA

Hallo Jochen,

herzlichen Dank! Mann, bist Du schnell ... bin noch dran, Link kommt gleich .

Probiere auch noch schnell Deinen Code - bis gleich.

Liebe Grüße
Sunny

ruster.MEDIA

Hallo Jochen,

hier der Link.

Herzliche Grüße und bis morgen
Sunny

Jochen

Hi Sunny,

danke für den link.

Also ich muss sagen, das ich dir da jetzt spontan empfehlen würde, das eher mit der "schriftkleiner" Lösung vom Post 3 umzusetzen.
Ich denke das würde besser aussehen, wie das "umschalten" auf eine einspaltige Ansicht.
Da würde es ja dann auf einmal ganz schön viel "freiraum" auf der Seite geben > Eher suboptimal für Tablets, könnte ich mir vorstellen.
Schon mal versucht, wie es da damit aussehen würde?

P.S: Oder die Seite ganz anders aufbauen. Ich finde die ein wenig "überladen".

ruster.MEDIA

Hallo Jochen,

vielen Dank für Deine Infos .

Der CSS-Code "schriftkleiner" (Post3) funktioniert einwandfrei:
Link zur Testseite mit "schriftkleiner"

Es wäre alles wunderbar, wenn nicht die kleinere Schrift auch in der einspaltigen Ansicht (bei schmalem Display) mit den dann wieder großen Bildern angezeigt würde.

Man müsste also zur Definition der css-Klassse "schriftkleiner" wahrscheinlich den "BreakingPoint" hinzunehmen oder ihn wissen, um eine weitere Breitendefinition per CSS ergänzen zu können.

Wobei dann ja auch die Lösung mit dem "Umschalten" - ab einer bestimmten Seitenbreite, nicht generell - auf die einspaltige Ansicht möglich sein könnte .

Sehr schön sieht das auf Eurer Webseite aus: Bei den Preisangaben erfolgt erst ein ein Wechsel auf zweispaltig, dann auf 1 spaltig:

https://www.zeta-producer.com/de/shop.html

Wie ist es denn das gelöst?

Ich dachte, auf meiner Seite funktioniert das "Umspringen" auf 2 Spalten nicht, weil es 3 Artikel in einer Reihe sind.
Deshalb habe ich mit 4 Slider-Artikeln und 4 Hinweisboxen-Artikeln versucht, aber bei mir funktioniert es nicht.

Bin gespannt, ob es eine Lösung gibt, lieben Dank.

Herzliche Grüße und ein schönes Wochenende
Sunny

Jochen

Hallo Sunny

so wie ich das eben sehe, findet wohl der Umschaltpunkt (Breakpoint) bei 650/640px auf die einspaltige Ansicht in dem Layout statt.
Wenn es dir helfen sollte, dann könnte man also einen auch einen 2ten CSS-Eintrag hinzufügen, der die Schrift bei kleiner als 650/640px wieder größer darstellt, wie z.B:

Code

<style>
@media (max-width: 800px) {
    .schriftkleiner {
    font-size: 0.5em;
}
@media (max-width: 650px) {
    .schriftkleiner {
    font-size: 1.0em;
</style>

Vielleicht wäre das eine Lösung für dich?
Ggf. mal mit den Werten „spielen“.

Wie das auf der Zeta-Seite gemacht worden ist, kann ich dir gerade auf die Schnelle leider nicht sagen.
(Das würde jetzt dann auch mein „Zeitraster“, dass ich hier für individuelle CSS-Wünsche aufbringe „sprengen“ Sorry.

Wenn du mit der obigen Variante nicht zufrieden sein solltest, dann kannst du jetzt noch:

A: Hoffen und warten, dass jemand anderes hier eine Lösung für dich noch ausarbeitet (vielleicht ja auch der Zeta-Support am Montag selbst?...)
B: Die Seite mal versuchen anders aufbauen, so das du gar nicht diesen Schönheitsfehler bekommst.
C: Wenn gar nichts "fruchtbares" dabei rauskommen sollte, dann bei Zeta selbst mal anfragen, wegen einer Layoutanpassung:
https://www.zeta-producer.com/de/webdesign-goeppingen.html und da auf „Jetzt individuelles Angebot anfordern“ klicken.

ruster.MEDIA

Hallo Jochen,

vielen lieben Dank für Deine Hilfe und Infos, der CSS-Code funktioniert, klasse!

Vielleicht verrät mir bzw. uns der Zeta-Support ja demnächst, wie das auf zeta-producer.com/de/shop.html gemacht wurde.

Ich entscheide mich also für Variante A, ggf. C .
Die Anordnung gefällt mir (ist nicht die "fertige" Seite) und ich denke, sie ist auch gängige Praxis. Daher stelle ich Variante B mal hintenan .

Herzlichen Dank nochmal für Deine Mühe.

Liebe Grüße und ein schönes Wochenende
Sunny

ruster.MEDIA

Wie die Zeit vergeht ...

Hier nochmal meine Bitte, vielleicht wird sie ja doch erfüllt :

Vielleicht verrät mir bzw. uns der Zeta-Support ja demnächst, wie das auf zeta-producer.com/de/shop.html gemacht wurde.

Liebe Grüße
Sunny

Business 13.3.0 — Producer Responsive — Grid — "Breakting-Point" für Wechsel von mehrspaltige in 1-spaltige Anzeige von Bildern ändern

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?