Du kannst grundsätzlich mit Media-Queries arbeiten, die für bestimmte Bildschirmgrößen unterschiedliche Abmessungen vorgeben.
Wir können hier keine Grundlagen vermitteln, weil es den Rahmen sprengen würde, aber ganz vereinfacht gesagt kannst du mit der CSS-Regel
@media (min-width: 300px ) and (max-width: 768px) {
img {
width: 92%;
height: auto;
}
}
die Größe eines Bildes für eine Bildschirmbreite zwischen 300 und 768 Pixel angeben. Möchtest du, dass ein Elementor-Widget mit der CSS-Klasse elementor-element-8dd6ccc ab einer Bildschirmgröße von 1.920 Pixel maximal eine Breite von 600 Pixel hat, sähe das dann so aus:
@media (min-width: 1920px ) {
.elementor-element-8dd6ccc {
width: 600px;
}
}
Mehr zu Media Queries kannst du z.B. hier nachlesen:
Using media queries
Hallo @pixolin vielen Dank für deine Antwort. Ich verstehe den Ansatz über Media Queries, dass ich da die verschiedenen Größen ansehen kann. Allerdings verstehe ich den Code nicht ganz. Bezieht sich dieser auf das Bild im Startbildschirm oder auf die Spalte (links unter dem Nav. Menü)? Nachdem ich den Code im zusätzlichen CSS im Customizer eingegeben habe, ist leider nichts passiert.
Elementor nennt die Elemente, die du auf die Seite ziehen und ablegen kannst, Elemetor-Widgets. Jedes Elementor-Widget bekommt nach dem Muster elementor-element-nummer eine individuelle CSS-Klasse zugewiesen, die du z.B. über die Entwicklertools im Browser auslesen kannst.
Die CSS-Regel
@media (min-width: 1920px ) {
.elementor-element-8dd6ccc {
width: 600px;
}
}
besagt umgangssprachlich ausgedrückt soviel wie
„Wenn die Seite angeschaut wird
und die minimale Breite bei 1920px liegt, dann
formatiere das Elementor-Widget mit der CSS-Klasse .elementor-element-8dd6ccc
mit einer festen Breite von 600px.“
Das Elementor-Widget mit der CSS-Klasse elementor-element-8dd6ccc ist der halbtransparente Textkasten links über dem Bild.
@andimitro27
Wenn die Website (seit gestern) nur noch im Wartungsmodus auffindbar ist, kann dir hier auch niemand mehr weiterhelfen.
Ich setze den Thread auf gelöst, solltest du weitere Fragen haben, kannst du die natürlich hier weiter einstellen, dann aber bitte mit zugänglicher Website.
Hallo @pixolin jetzt habe ich verstanden was du mit deinem Code aussagen möchtest. Ich habe den Code sowohl im Customizer CSS eingefügt als auch im Theme Editor (im Style Bereich). Jedoch ändert sich nicht die Größe der Spalte im 1920×1200 Modus. Habe ich etwas falsch verstanden oder falsch gemacht? Viele Grüße
Hallo,
Ich habe den Code sowohl im Customizer CSS eingefügt als auch im Theme Editor (im Style Bereich).
Das solltest du auf keinen Fall im Theme-Editor eingeben. Im schlimmsten Fall schredderst du dir dein Theme. Die richtige Stelle wäre unter Design > Customizer > Zusätzliches CSS, wobei ich dir bezogen auf Elementor nicht sagen kann, ob es da eine sinnvollere Stelle gibt, weil ich Elementor nicht einsetze.
Hinsichtlich deiner Frage noch mal der Hinweis, dass du das über die Media Queries steuern kannst. Wie dir aber bereits Bego geschrieben hat, ist das hier off topic. Wir können im Rahmen des Supports keine CSS-Grundlagen vermitteln.
Viele Grüße
Hans-Gerd
