Support » Allgemeine Fragen » Fixiere Spalten die sich bei unterschiedlichen Monitorgrößen nicht verschieben

  • Gelöst andimitro27

    (@andimitro27)


    Hallo zusammen. Ich erstelle gerade eine WordPress-Seite für meine Schwester und benötige Hilfe. Ich möchte auf der linken Seite des Startbildes einen kurzen Infoblock in Form einer Spalte einfügen. Diese verkleinert sich allerdings extrem bei größeren Monitoren. Gibt es eine Option die Spalte so zu fixieren, dass sich deren Position und Größe nicht ändert oder nur minimal? Vielen Dank vorab

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • 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

    Thread-Ersteller andimitro27

    (@andimitro27)

    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.

    Thread-Ersteller andimitro27

    (@andimitro27)

    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

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)