2 colonne responsive

[debby87]

Salve a tutti,
questo è il mio sito: http://www.progettaregiardino.net

Vorrei che nella sezione CONTATTACI avessi un risultato di questo tipo:

1. la versione desktop deve prevedere 2 colonne, una con il form contatti e l'altra con la mappa google;
2. la versione mobile dovrebbe prevedere il form e la mappa uno sotto l'altro altrimenti non entrerebbe nello schermo dello smartphone.

Il codice è questo:

<div style="float: left; text-align: justify; width: 47%;"><p style="text-align: left;">[contact-form-7 id="65" title="Modulo di contatto 1"]</p></div>

<div style="float: right; text-align: justify; width: 47%;"><p>[wpgmza id="1"]</p><p>Via Cassia, 1415 <br />00123 Roma<br />Tel. <a href="tel:+3906.87671899">06.87671899 Chiama</a><br />info@openspaceroma.it</p></div>

<div style="clear: both;"></div>

La versione desktop non ha problemi, ma la versione mobile ovviamente è un disastro.Come potrei risolvere questo problemino? Vi sarei davvero grati se mi aiutasse

Grazie in anticipo

[partime]

Dovresti innanzitutto mettere degli id ai due DIV, poi nelle media query nel foglio di stile dovresti impostare per entrambi, al di sotto di una certa larghezza dello schermo, la larghezza al 100% e annullare il float.

[debby87]

Dovresti innanzitutto mettere degli id ai due DIV, poi nelle media query nel foglio di stile dovresti impostare per entrambi, al di sotto di una certa larghezza dello schermo, la larghezza al 100% e annullare il float.

Oh my god! e come si fa? non esiste un esempio o non so che altro?

[CristianaPopa]

Ciao,

È necessario aggiungere id o classe per i tuoi div e quindi utilizzare un supporto di query schermo. Per ogni dimensione dello schermo che si desidera regolare le div è necessario applicare una media query e dare gli immobili nei div.

Vedi questo esempio qui.

Cristiana.
#OracleCloud