I am trying to use W3.CSS to make a form that dynamically narrows itself depending on the screen resolution, or size of the browser window. In its default state, it should have a row containing "Name" and "Phone Number" columns, a row containing "Email" and "Company" columns, a row containing a "Comments" column, and a row containing a CAPTCHA box and a submit button. In the narrowed state, all columns should stack on top of each other. If you expand the window in this fiddle, you will see that the desired behavior occurs. The problematic fiddle can be seen here. If you compare the two, you will see that the number of elements, for the most part, is the same. The only difference is that the one that works has some extra elements, and some other minor differences. I have been examining these for the last few hours, and I would appreciate it if a different set (or sets) of eyes could look them over for me.
Version that doesn't expand:
<div class="container-fluid" style="margin:0px;padding:0px;background-image:url('')">
<div style="padding: 50px 0px;line-height: 22px;font-weight: normal;text-align:center;background-color: rgb(234, 234, 234);">
<div class="w3-row">
<div class="w3-col 16">
<!--make a row for the label and input-->
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 14">
<label for="Name_input">Name</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 18">
<select>
<option> NodeList</option>
</select>
</div>
</div>
</div>
<div class="w3-col 16">
<!--make a row for the label and input-->
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 14">
<label for="Phone_input">Phone</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 18">
<input type="text" id="Phone_input" style="width:100px;">
</div>
</div>
</div>
</div>
<br>
<div class="w3-row">
<div class="w3-col 16">
<!--make a row for the label and input-->
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 14">
<label for="email_input">email</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 18">
<input type="text" id="email_input" style="width:100px;">
</div>
</div>
</div>
<div class="w3-col 16">
<!--make a row for the label and input-->
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 14">
<label for="Company_input">Company</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 18">
<input type="text" id="Company_input" style="width:100px;">
</div>
</div>
</div>
</div>
<br>
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 12">
<label for="comments_input">comments</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 110">
<textarea id="comments_input" style="height: 103px; font-size: 20px; margin: 0px; width: 322px;"></textarea>
<!-- if this was the last non-col input, add an additional row for the prevention input and submit button-->
<div class="w3-row">
<div id="DynForm_Prevention_1496" class="w3-col 15">
<label for="DynBtn_Prevention_1496" id="DynBtn_Prevention_Label_1496">Enter product in the box</label>
<input name="DynBtn_Prevention_1496" type="text" id="DynBtn_Prevention_1496" style="font-weight:600;width:100px;">
<span id="DynBtn_Prevention_Keyword_1496" style="display:none;">product</span>
<span style="color:#ff0000">*</span>
<span style="color:#ff0000;display:none;" id="DynBtn_Prevention_Invalid_1496">Incorrect value, please try again.</span>
</div>
<div class="w3-col 17">
<div style="text-align:left;padding:0px">
<a id="submitBtn_1496" class="btn btn-primary" style="font-size:18px;padding:20px 10px;font-weight:600;border-radius:6px;color:#fff;font-family: 'Segoe UI',Tahoma,Helvetica,Arial,sans-serif" href="http://dnndev.me/CAS_DynForm-Test/moduleId/1802/controller/Item/action/Submit">Submit product Pro Free Trial Request</a>
</div>
</div>
</div>
</div>
</div>
<div id="DynForm_Footer_1496" style="padding:20px;text-align:center">
<h5>Download instructions and licensing information will be emailed to you. Please make sure your email address is valid.</h5>
</div>
</div>
</div>
Version that does expand:
<div class="container-fluid" style="margin:0px;padding:0px;background-image:url('')">
<div style="padding: 50px 0px; line-height: 22px; font-weight: normal; text-align:center;background-color: rgb(234, 234, 234);">
<div class="w3-row">
<div class="w3-col l6">
<div class="w3-row">
<div class="w3-col l4">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Name" style="font-size:22px">Name<span style="color:#ff0000">*</span></label></div>
<div class="w3-col l8">
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$Name" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Name"
style="width:85%;font-size:22px"><br>
<span id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_ctl01" class="NormalRed xmp-validation" style="font-size:16px;display:none;">Required</span>
</div>
</div>
</div>
<div class="w3-col l6">
<div class="w3-row">
<div class="w3-col l4">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Phone" style="font-size:22px">Phone Number<span style="color:#ff0000">*</span></label></div>
<div class="w3-col l8">
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$Phone" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Phone"
style="width:85%;font-size:22px"><br>
<span id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_ctl03" class="NormalRed xmp-validation" style="font-size:16px;display:none;">Required</span></div>
</div>
</div>
</div>
<br>
<div class="w3-row">
<div class="w3-col l6">
<div class="w3-row">
<div class="w3-col l4">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_email" style="font-size:22px"> Email<span style="color:#ff0000">*</span></label></div>
<div class="w3-col l8">
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$email" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_email"
style="width:85%;font-size:22px"><br>
<span id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_ctl05" class="NormalRed xmp-validation" style="font-size:16px;display:none;">Required</span></div>
</div>
</div>
<div class="w3-col l6">
<div class="w3-row">
<div class="w3-col l4">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Company" style="font-size:22px">Company</label></div>
<div class="w3-col l8">
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$Company" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Company"
style="width:85%;font-size:22px"></div>
</div>
</div>
</div>
<br>
<div class="w3-row">
<div class="w3-col l2">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_comments" style="font-size:22px">Comments</label></div>
<div class="w3-col l10">
<textarea name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$comments" rows="2" cols="20" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_comments"
style="height:120px;width:85%;font-size:20px"></textarea>
<br>
<div style="text-align:center;font-family: 'Segoe UI',Tahoma,Helvetica,Arial,sans-serif;padding-top:15px">
<div id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_vsDemoRequestTable" class="NormalRed xmp-validation" style="font-size:16px;display:none;">
</div>
</div>
<br>
<div class="w3-row">
<div class="w3-col l5">
<div style="float:left;padding-left:10px">
<img src="/portals/0/images/logos/product_thumbnail2.png" height="22"> </div>
<div style="float:left;font-size:18px"> <span style="color:#ff0000">Enter <b>product</b> in the
box.</span></div>
<div style="clear:both"></div>
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$productcaptcha" type="text" maxlength="6" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_productcaptcha"
style="font-size:16px;width:88px;margin-bottom:10px"><span style="color:#FF0000">*</span>
</div>
<div class="w3-col l7">
<div style="text-align:left;padding:0px">
<input type="submit" name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$ctl08" value="Submit product Pro Free Trial Request"
onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$ctl08", "", true, "dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_XMPVAL", "", false, false))"
class="btn btn-primary" style="font-size:18px;padding:20px 10px;font-weight:600;border-radius:6px;color:#fff;font-family: 'Segoe UI',Tahoma,Helvetica,Arial,sans-serif"></div>
</div>
</div>
</div>
</div>
<div style="padding:20px;text-align:center">
<h5>
Download instructions and licensing information will be emailed to you. Please make sure your email address is
valid.
</h5>
</div>
