Formatting a form on mobile only

Issue

I am updating a wordpress web site with a form made on Contact Form 7 (html code below)

<h2 class="red_heading">So We Can Contact You...</h2>
<div class="row quote_form_row">
<div class="col">
<label> Name<span class="red">*</span>
[text* your-name] </label>
</div>
<div class="col"><label> Email<span class="red">*</span>
[email* your-email] </label>
</div>
<div class="col"><label> Phone Number<span class="red">*</span>
[tel* your-tel] </label>
</div>
</div>
<hr/>
<h2 class="red_heading">How we can Help?</h2>

<div class="row quote_form_row">
<div class="col flex-2 glbl"><label> Garment 1</label></div>
<div class="col flex-3"><label> Garment Type <span class="red">*</span>
[text* garment_type_1] </label></div>
<div class="col flex-3"><label> Garment Color<span class="red">*</span>
[text* garment_color_1] </label></div>
<div class="col flex-3"><label> Preferred Decoration Style<span class="red">*</span> [text* prefered_deco_style_1] </label></div>
<div class="col flex-2"><label> Anticipated Qty<span class="red">*</span>
[text* antecipated_qty_1] </label></div>
</div>

<div class="row quote_form_row">
<div class="col  flex-2 glbl"><label> Garment 2</label></div>
<div class="col flex-3"><label> Garment Type 
[text garment_type_2] </label></div>
<div class="col flex-3"><label> Garment Color
[text garment_color_2] </label></div>
<div class="col flex-3"><label> Preferred Decoration Style
[text prefered_deco_style_2] </label></div>
<div class="col flex-2"><label> Anticipated Qty
[text antecipated_qty_2] </label></div>
</div>

<div class="row quote_form_row">
<div class="col  flex-2 glbl"><label> Garment 3</label></div>
<div class="col flex-3"><label> Garment Type 
[text garment_type_3] </label></div>
<div class="col flex-3"><label> Garment Color
[text garment_color_3] </label></div>
<div class="col flex-3"><label> Preferred Decoration Style
[text prefered_deco_style_3] </label></div>
<div class="col flex-2"><label> Anticipated Qty
[text antecipated_qty_3] </label></div>
</div>
<hr/>

<div class="row quote_form_row">
<div class="col"><label> Upload Your Logo[file logo] </label></div>

<div class="col flex-2"><label> Additional Message
[textarea additional_msg placeholder "Additional Message / garments required"]</label></div>

</div>

<div class="text-right">
[submit class:btn class:btn-danger class:gaq "Get A Quote"]
</div>

It looks perfect on desktop but not user friendly on mobile (see screen shot). I would like to make it so there is only one column per row on mobile.

I did not write the html/css for this form and the web site was running on a different theme when made (I have checked for the css in the old theme's style.css file to no avail.) I do not even know where to start to fix the mobile layout.

Solution

<div class="col-md">
    <label> Name<span class="red">*</span>
    [text* your-name] </label>
</div>

Try adding class col-md instead of col

Answered By - Steve James