Contact Form 7 Responsive Columns

Hey,

I am trying to set up a form with columns that are responsive (ie on a mobile). I have managed to set up the columns here on my orphanages website just fine using the following CSS:

#c7form_left {
    width: 47%;
    float:left;
    margin-right: 3%;
}  

#c7form_right {
    width: 47%;
    float:left;
    margin-left: 3%;

}  

.c7form:after {
    content:"020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;

}  

.c7form{
    display:block;

}  

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 85%;
}

And inserting it using the following code:

<div id="c7form">
<div id="c7form_left">
<p>Your Name (required)<br />
    [text* your-name] </p>
<p>Your Date of Birth (DD/MM/YYYY):<br />
    [text* dateofbirth] </p>
<p>Gender:<br />
     [text* gender] </p>
<p>Religion: <br />
    [text* Religion]</p>
<p>Relevant Dietary Requirements Or Medical Issues:<br />
   [text* text-254] </p>
<p>Home Address:<br />
    [textarea* text-339] </p>
<p>Any Experience Working With Other Aid-Organizations?<br />
   [textarea* text-258] </p>
<p>Any Experience Working With Children?<br />
   [textarea* text-257] </p>
<p>How Did You Hear About Us? (ie web-search, friend)<br />
   [text* text-884]</p>

</div>
<div id="c7form_right">
 <p>Your Email (required):<br />
    [email* your-email] </p>
<p>Are You Traveling With Anyone Else?<br />
    [text* text-876] </p>
<p>Nationality:<br />
    [text* text-882] </p>
<p>Date You Want To Arrive (DD/MM/YYYY):<br />
  [text* text-402] </p>
<p>Date You Want To Leave (DD/MM/YYYY):<br />
    [text* text-993] </p>
<p>Educational Experience:<br />
    [textarea* text-115] </p>
<p>Relevant Skills & Abilities:<br />
   [textarea* text-256] </p>
<p>Why Do You Want To Work With Us?<br />
   [textarea* text-255] </p>
<p>Upload Your Photo:<br />
[file* file-140] </p>
</br>
</div>
<p><i>We ask that everyone who wants to volunteer with us first read and agree to our Volunteers FAQ and our Visitors Handbook before applying. Upon arrival at the mission volunteers are required to sign a copy of the Visitors' Agreement.</i><br /><br />
[checkbox* checkbox-383 "I have read and agree to everything in the FAQ:"]<br /><br />
[checkbox* checkbox-382 "I have read the Visitors Handbook and agree to follow the Visitors' Agreement:"]<br />
</p>
<div id="c7form_left">
<p>Please enter the following code into the box below: [captchac captcha-505 size:l]</p><br />
<p>[captchar captcha-505 1/1]</p><br />
<p>[submit "Send"]</p>
</div>
</div>

Now the problem that I am having is that the two columns dont stack when the browser size is reduced. They just keep working off the percentages.

I found this post, which seems to suggest that the following lines should be added to the CSS…

Clear:both;
float:none;

…but I can’t understand where that is supposed to go. Anyone ever actually successfully done this? I thought it would be simple -and something that many others would have tried to do in the past but can’t get much help out of google. 😉

Thanks in advance for any answers.

Clifton.

https://ww.wp.xz.cn/plugins/contact-form-7/