WPcft7 auf Karte (Openstreetmap) Responsive?

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:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<p><span style="font-size: 12pt;">[smartslider3 slider=2]</span></p>
<div class="embed-responsive embed-responsive-4by3">
    <div id="map">[wpgmza id="1"]
      
              
               <div id="contact_form">
                    [contact-form-7 id="116" title="Kontaktformular 1"]
               </div>
          
          
    </div>
</div>

Code der Contact Form:

<div id="contact_box">
<label> Dein Name (Pflichtfeld)
    [text* your-name] </label>


<label> Deine E-Mail-Adresse (Pflichtfeld)
    [email* your-email] </label>


<label> Betreff
    [text your-subject] </label>


<label> Deine Nachricht
    [textarea your-message] </label>


[recaptcha]


[submit "Senden"]
</div>

CSS Abschnitt:

#map {
    height: 100%;
    width: auto;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.85;
    filter: alpha(opacity=85);
    -moz-opacity:0.85; /* Mozilla */
    -opera-opacity:0.85; /* Opera */
    background: hsla(350,75%,75%,0.3);
}
#wpcf7-f116-p2-o1 {
    position: absolute;
    top: 5%;
    right: 5%;
    opacity: 0.95;
    filter: alpha(opacity=95);
    -moz-opacity:0.95; /* Mozilla */
    -opera-opacity:0.95; /* Opera */
    background: hsla(350,75%,75%,0.3);
}
.wpcf7-form-control {
width: 100%;
}
.wpcf7-submit {
width: 40%;
height: 5%;
}
.wpcf7-form-control.wpcf7-submit {
font-size: 18px;
font-size: 1.286rem;
padding: 14px 0;
padding: 1rem 0;
}

Theme: Nero

Wie geht das am besten?

Grüße.

Keiner?

Mein Codeschnipsel sieht jetz so aus:

<p><span style="font-size: 12pt;">[smartslider3 slider=2]</span></p>
    <div class="embed-responsive" style="display:flex;">
      [wpgmza id="1"]
      [contact-form-7 id="116" title="Kontaktformular 1"]
    </div>

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 :/

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]

Zitat von r23

Und was hat dir nicht an

Code

<div class="embed-responsive embed-responsive-4by3">[wpgmza id="1"]</div>

gefallen?

Na es soll ja das Kontaktformular über der Karte dargestellt werden, also nested in der Karte sein. Nur wenn ich mich an Bootstrap->Grid->nested halte funzt es nicht wie es soll.