https://codepen.io/chriscoyier/pen/DmnlJ
Interspire responsive form change the #frmSS17
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
tbody {
padding: 20px 15%;
}
#frmSS17 > tr {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
margin-bottom: 3em;
}
#frmSS17 > tr > td {
margin: 0 0 5px 0;
}
#frmSS17 > tr > td {
width: 25%;
float: left;
padding-right: 10px;
}
#frmSS17 > tr > td {
width: 75%;
float: right;
}
#frmSS17 > tr > td {
font-size: 90%;
}
td {
border: 0;
padding: 0;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #4697e4;
}
@media (max-width: 600px) {
#frmSS17 > tr {
margin: 0 0 15px 0;
}
#frmSS17 > tr > td,
#frmSS17 > tr > td
{
width: 100%;
float: none;
margin: 0 0 5px 0;
}
#frmSS17 > tr > td,
#frmSS17 > tr > td {
width: 100%;
float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
width: 100%;
}
}
@media (min-width: 1200px) {
#frmSS17 > tr > td {
text-align: right;
}
}
#frmSS17 > table > tbody > tr:nth-child(4) {
background: white;
}
tr {
display: block;
margin-bottom: 1em;
width: 75%;
float: Left;
}