26907 sujets

CSS et mise en forme, CSS3

J'ai construit un formulaire via contactform7
Ce formulaire a été construit via un Tableau
Vous pouvez voir le formulaire ICI

Le souci c'est que le formulaire n'est pas du tout responsive sur Mobile
Je ne sais pas quoi coder après le code
@media screen and (max-width:868px)   

Merci pour votre aide


Voici le Code HTML

<table  >
<caption class=texte_caption_form>Les champs marqués d’une <span class=texte_aste> *</span> sont obligatoires </caption>
<tr>
<td class=texte_param_form>
Civilité <span class=texte_aste> *</span>
[radio your-MR class:choix_box_form  label_first default:1 "Mr" "Mme" "Mlle"] 
</td>
</tr>
 
<tr>
<td class=texte_param_form>  
Prénom <span class=texte_aste> *</span>    
[text* your-firstname class:name_firstname_form] 
</td>     
 
<td class=texte_param_form> 
Nom <span class=texte_aste> *</span> 
[text* your-name class:name_firstname_form]   
</td>   
</tr>
 
 
 
<tr>
<td class=texte_param_form> 
E-mail <span class=texte_aste> *</span>     
[email* your-mail class:email_form]  
</td>   
 
<td class=texte_param_form> 
N° téléphone  
[tel your-tel class:tel_form]     
</td>     
</tr>
 
<tr>
<td class=texte_param_form> 
Pays de résidence <span class=texte_aste> *</span>    
[select* country-home class:pays_form include_blank
"France" 
"Afghanistan"    
] 
</td>
</tr>
 
<tr>
<td class=texte_param_form> 
Pays de recherche <span class=texte_aste> *</span>    
[select* your-pays-guide class:pays_form include_blank 
"Albanie"
"Algérie"
]      
</td> 
 
<td class=texte_param_form> 
Région/ville/lieu recherché 
[text your-lieu-guide class:region_ville_form]      
</td>
</tr>
 
<tr>
<td class=texte_param_form> 
Début visite <span class=texte_aste> *</span> 
[date* day-deb class:date_form date-format:dd/mm/yy min-date:0 first-day:1]
</td>  
<td class=texte_param_form> 
Fin visite <span class=texte_aste> *</span> 
[date* day-fin class:date_form date-format:dd/mm/yy min-date:0 first-day:1]
</td>  
</tr>
 
<tr>
<td class=texte_param_form> 
 Combien de personnes <span class=texte_aste> *</span> 
[number* your-number-guide class:number_form  min:1 max:21 include_blank  ]
</td>
 
<td class=texte_param_form> 
Langue(s) parlée(s) <span class=texte_aste> *</span>
[checkbox* your-langue class:choix_box_form label_first  "Français" "Anglais" "Espagnol" "Allemand" "Italien"]    
</td>
</tr>
 
<tr>
<td colspan="2"  class=texte_param_form>
Message 
[textarea your-message-guide class:message_form]
</td>
</tr>
 
<tr>
<td>
[recaptcha] 
</td> 
</tr>
 
<tr>
<td colspan="2">
[submit "Envoyer" ]
</td>
</tr>
 
</table>


Voici le Code CSS

    /* ******************************************** */
    /* Paramétrer les textes                        */
    /* ******************************************** */
    .texte_aste {
    font-weight: bold  !important;
    color: red !important;
    }
     
    .texte_param_form {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 3.125rem  !important;
    font-size: 1.000rem  !important;
    font-family: "Arial"  !important;
    text-align: left  !important;
    color: #0C376C !important;
    font-weight: bold !important;	
    }
     
    .texte2_param_form {
    font-size: 0.650rem  !important;
    font-weight: normal !important;	
    font-style: italic !important;	
    }
     
    .texte_caption_form {
    text-align: left  !important;
    }
    /* ******************************************** */
    /* Paramétrer le bouton submit                  */
    /* du formulaire Recherchez un guide            */
    /* ******************************************** */
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-submit {
        width: 30% !important;
    }
    input.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #0C376C  !important;
    color: #FD9F19   !important;
    border-radius: 15px  !important; /* Coins arrondis */
    cursor:pointer   !important; 
    padding-left:2.000rem  !important; 
    padding-right:2.000rem   !important; 
    font-weight: bold  !important;
    font-size: 1.250rem  !important;
     
    }
     
    input.wpcf7-form-control.wpcf7-submit {
    background-color: #FD9F19 !important;
    color: #0C376C !important;
    border-radius: 15px !important; /* Coins arrondis */
    cursor:pointer   !important; 
    padding-left:2.000rem  !important; 
    padding-right:2.000rem   !important; 
    font-weight: bold  !important;
    font-size: 1.250rem  !important;
    }
     
    /* ******************************************** */
    /* Paramétrer le tableau                        */
    /* ******************************************** */
     
    .wpcf7 .wpcf7-form table
    {
        background-color: #f7f7f7 !important;
        border: 2px solid #0C376C !important;
    	width: 70% !important;
    	margin-left: auto !important;
    	margin-right: auto !important;
    }
     
    .wpcf7 .wpcf7-form table td {
        padding-left: 10px !important;
    	width: 40% !important;
    	vertical-align: top !important;
    }
     
     
     
    /* ******************************************** */
    /* Paramétrer les cellules input                */
    /* ******************************************** */
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-text.name_firstname_form {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-email.email_form {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-tel.tel_form {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-select.pays_form {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-text.region_ville_form {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-date.date_form {
    width: 6.50rem  !important;	
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }	
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-number.number_form {
    width: 4.50rem  !important;	
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-textarea.message_form {
    width: 25.625rem  !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-text.langue_form {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-url.web_form {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-url.reseau_form {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }
     
    .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-radio.choix_box_guide {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 0.850rem  !important;
    font-family: "Arial"  !important;
    text-align:	justify   !important;
    color: #0C376C !important;
    }