Support » Plugins » Elementor Spaltenanordnung Responsive Problem

Elementor Spaltenanordnung Responsive Problem

  • Gelöst danesahne

    (@danesahne)


    vor 1 Jahr, 2 Monaten

    Ein wunderschönes Wochenende wünsche ich.

    Ich arbeite mit Elementor an einer kleinen Landingpage, soweit auch alles prima. Am Desktop sieht die Seite aus wie gewünscht, jedoch auf der Mobilansicht verschiebt es mir einen Button und das sieht scheußlich aus.

    Ich habe zwei Spalten angelegt, Linke Spalte Text und Rechte Spalte ein Button (Screenshot) sobald ich aber auf die Seite aber Mobil aufrufe setzt es mir den Button über den Text (Screenshot).

    Rufe ich die Responsive Ansicht auf und schiebe den Button unterhalb des Textes, so setzt er den Text auf der Desktop Seite rechts und den Button links (Screenshot).

    Ich bin wirklich am verzweifeln, da Änderungen innerhalb der Responsive Ansicht auch nur dort ausgeführt werden sollten und nur das jeweilige Gerät betreffen.

    Muss ich hier vielleicht mit Custom CSS arbeiten?

    Ich danke schon einmal für jegliche Hilfe.

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 2 Monaten

    Hallo,
    wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen. Lies bitte auch noch mal: Bevor du ein neues Thema (Thread) erstellst.
    Viele Grüße
    Hans-Gerd

    Thread-Starter danesahne

    (@danesahne)

    vor 1 Jahr, 2 Monaten

    https://landing.artitup.de Vielen Dank!

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 2 Monaten

    Hallo,
    so weit ich das anhand der Website und der gelieferten Screenshots sehen kann, entspricht das dem Standardverhalten bei Spalten, egal ob mit Elementor (den ich nicht nutze) oder mit dem Block-Editor. Irgendwie müssen ja die Spalten „aufgelöst“ werden, wenn Geräte mit schmaleren Displays verwendet werden. In der Regel wird dann der Inhalt der linken Spalte (Button) über dem Inhalt der rechten Spalte (Text) angezeigt. Per CSS-Regel kann ggfs. die Reihenfolge geändert werden.

    Mir ist nicht klar, wie du das denn gerne umgesetzt haben möchtest. Beschreibe das doch mal bitte.

    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 2 Monaten

    1. Wechsle in der Elementor-Leiste in den „Responsiven Modus“ (Icon Handy/Tablet – 1). Damit wird über der Webseite eine Leiste eingeblendet. Dort klickst du auf das Icon Handy (2).
    2. Erstelle einen neuen Abschnitt mit zwei (oder mehr) Spalten.
    3. Fahre mit der Maus über eine Spalte und klicke dann auf das Icon „Spalte bearbeiten“(3).
    4. In der Elementor-Sidebar kannst du nun unter Layout die Breite der Spalte eingeben. Bei zwei Spalten darf die Breite jeder Spalte 50% (4) nicht überschreiten, bei drei Spalten 33% usw. Über das Desktop/Tablet/Handy-Icon (5) kannst du die Werte für die Darstellung auf großen/mittleren/kleinen Displays anpassen.

    Screenshot Einstellungen
    (zum Vergrößern anklicken)

    Ich nutze Elementor selber aus Gründen nicht.

    Moderator Angelika Reisiger

    (@la-geek)

    vor 1 Jahr, 2 Monaten

    @danesahne

    Da du keine näheren Angaben machst ( @hage hatte dich bereits auf den von mir verfassten FAQ-Artikel hingewiesen „Bevor du ein neues Thema (Thread) erstellst„) kann man nur raten.

    Bei einfachem HTML, wenn 2 nebeneinander liegende Container auf Tablet/Smartphone per CSS in der Summe auf mehr als insgesamt 100 % Breite gesetzt werden, ist ohne weitere CSS-Eingriffe immer der linke Container oben. Das kann man mit CSS (z. B. float beeinflussen).

    Seit der Einführung von Flexbox und CSS-Grid ist man in der Gestaltung der Positionierung jedoch und glücklicherweise wesentlich flexibler geworden.

    Wie man dem CSS-Code deiner Website entnehmen kann, greifen bei den beiden Spalten (Container) Flexbox-Regeln. Was dort die Reihenfolge bestimmt ist order.

    Wie eingangs erwähnt, fängt nun das Raten an. Liegt es am Theme, ist bei der Website in Elementor das experimentelle Feature aktiviert etc.

    Nachfolgend ein kurzer Screencast wie du es in den Griff bekommen könntest:

    https://share.getcloudapp.com/Wnuyrv1z

    Thread-Starter danesahne

    (@danesahne)

    vor 1 Jahr, 2 Monaten

    Vielen lieben Dank an alle!!

    @bego Mario Garde hat super funktioniert, so konnte ich mir erst mal ein wenig weiterhelfen!

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Das Thema „Elementor Spaltenanordnung Responsive Problem“ ist für neue Antworten geschlossen.

Ansichten