1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WPcft7 auf Karte (Openstreetmap) Responsive?

Dieses Thema im Forum "Design" wurde erstellt von ChookaWP, 29. November 2018.

  1. ChookaWP

    ChookaWP Member

    Registriert seit:
    26. November 2018
    Beiträge:
    5
    Zustimmungen:
    0
    Hallo Community,

    bin neu in WP und setze ein Design einer Seite um. Nun soll das Ganze auch Responsive sein. Normalerweise erstelle ich mir meine Seiten selbst mit Bootstrap. Da würde ich ein container mit einem 1x1 Grid nehmen für die Map und da ein Grid z.B. 1X3 drübersetzen, so ähnlich jedenfalls. Es soll nun aber mit WP gelöst werden. Klar ich habe das Kontaktformular statisch eingefügt, da kracht es dann wenn sich die Auflösung vermindert. Das Kontaktformular ist natürlich elementar für den Seiteninhaber.

    Hier ein paar Infos:

    URL-Link: http://chiropressur-merzig.de/?page_id=2
    Plug-Ins: Contact Form 7 & WP Google Maps

    Code der Seite aus WP-UI:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Code der Contact Form:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    CSS Abschnitt:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Theme: Nero

    Wie geht das am besten?

    Grüße.
     
  2. ChookaWP

    ChookaWP Member

    Registriert seit:
    26. November 2018
    Beiträge:
    5
    Zustimmungen:
    0
  3. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.317
    Zustimmungen:
    582
    Dein Theme verwendet doch Bootstrap...


    dann verzichte auf <div Id="map">

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    oder wenn dein Shortcode wirklich map benötigt

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  4. ChookaWP

    ChookaWP Member

    Registriert seit:
    26. November 2018
    Beiträge:
    5
    Zustimmungen:
    0
    Mein Codeschnipsel sieht jetz so aus:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    display:flex hat was gebracht, dennoch ist das Ergebnis auf dem Handy nicht wie gewünscht, da das contact-form-7 nicht mittig platziert wird.

    Die id="map" und id="contact_form" hab ich komplett weg, war ja auch quatsch. Trotzdem kann ich das Verhalten der CF7 nicht richtig steuern :/
     
  5. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.317
    Zustimmungen:
    582
    Und was hat dir nicht an
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    gefallen?

    echt jetzt... so einen grusel...


    <div class="embed-responsive embed-responsive-4by3">[wpgmza id="1"]</div>
    embed-responsive embed-responsive-4by3 benötigt keinen "display:flex;"

    hier das Handbuch von Bootstrap
    https://getbootstrap.com/docs/4.1/utilities/embed/

    dein [contact-form-7 id="116" title="Kontaktformular 1"] hat darin nicht verloren...
     
  6. ChookaWP

    ChookaWP Member

    Registriert seit:
    26. November 2018
    Beiträge:
    5
    Zustimmungen:
    0
    Hallo, danke für die Antworten.

    Die Ansicht im Body der Site soll "nested" sein also die Karte im Hintergrund und das CF7 nested darin im Grid, das ganze soll Responsive sein.

    Am besten ist es wenn am Mobile die beiden Bootstrap Grid Elemente/Komponenten untereinander dargestellt werden und an größeren Geräten wieder nested...

    Also nested ist zumindest mal die Idee.

    Regular view: (nested)
    [Karte [ ] [Kontaktformular] ]

    Responsive view: (untereinander)
    [ [Kontaktformular]
    [ ]
    Karte]
     
  7. ChookaWP

    ChookaWP Member

    Registriert seit:
    26. November 2018
    Beiträge:
    5
    Zustimmungen:
    0
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden