I have got a task to use responsive design for the given page.But it is not working properly.In the case dropdown list it doesn't support the design. My html page is
<style type="text/css">
.body
{
width:100%;
}
#wrapper
{
width:100%;
}
#container
{
width:100%;
}
#frmEnergyEfficiency
{
width:100%;
height:900px;
margin:0px auto;
}
.leftalign
{
text-align:left;
padding-left:2px;
}
.rightalign
{
float:right;
padding-right:2px;
}
.alignment
{
float:right;
padding-right:0px;
}
.divTable{
display:table;
width:790px;
border-spacing:5px;
}
.divRow{
display:table-row;
width:790px;
clear:both;
}
.divCell{
float:left;
display:table-column;
width:155px;
}
.divAlign
{
text-align:left;
width:400px;
}
.divAlign1
{
text-align:left;
width:670px;
}
.align
{
width:150px;
}
</style>
<link rel="stylesheet" media="only screen and (max-width:724px)" href="ipad.css">
<link rel="stylesheet" media="only screen and (max-width:424px)" href="ipad1.css">
</head>
<body>
<div id="wrapper">
<div id="container">
<h3><center>Energy Efficiency</center></h3><br />
<form id="frmEnergyEfficiency" method="post" action="EnergyEfficiency">
<h4><center>EE loan overview</center></h4>
<div class="divAlign">
<div>
<label class="leftalign">Country</label>
<select name="ddlCountry"id="ddlCountry"class="rightalign"style="width:150px;">
<option>Select Country</option>
<option value="INDIA">INDIA</option>
<option value="AMERICA">AMERICA</option>
<option value="CHINA">CHINA</option>
<option value="RUSSIA">RUSSIA</option>
<option value="PAKISTHAN">PAKISTHAN</option>
<option value="SINGAPORE">SINGAPORE</option>
<option value="GERMANY">GERMANY</option>
<option value="MEXICO">MEXICO</option>
<option value="ITALY">ITALY</option>
</select>
</div><br />
<div>
<label class="leftalign">City (or nearby city)</label>
<select name="ddlCity"id="ddlCity" class="rightalign"style="width:150px;">
<option value="Select">Select City</option>
<option value="NEW YORK">NEW YORK</option>
<option value="BANGALORE">BANGALORE</option>
<option value="MEXICO CITY">MEXICO CITY</option>
<option value="LONDON">LONDON</option>
<option value="HYDERABAD">HYDERABAD</option>
<option value="HONG KONG">HONG KONG</option>
<option value="LAHORE">LAHORE</option>
<option value="LOS ANGLES">LOS ANGLES</option>
</select>
</div><br />
<div>
<label class="leftalign">Industry sector of borrower</label>
<input type="text" name="txtIndustrySector"id="txtIndustrySector"class="rightalign"/>
</div><br />
<div>
<label class="leftalign">EE component of loan</label>
<input type="text" name="txtEEComponent"id="txtEEComponent"class="rightalign"/>
</div><br />
<div>
<label class="leftalign">Total project cost</label>
<input type="text" name="txtProjectCost"id="txtProjectCost"class="rightalign"/>
</div><br />
<div>
<label class="leftalign">Tenor of financing</label>
<input type="text" name="txtTenorFinancing"id="txtTenorFinancing"class="rightalign"/>
</div><br />
</div>
<div class="divAlign1">
<h4><center>Technical data</center></h4>
<div>
<label class="leftalign">Is the EE loan for process or non-process?</label><span>*</span>
<span class="alignment">
<input type="radio" name="radEESold" value="Non-Process"/>Non-Process
<input type="radio" name="radEESold" value="Process"/>Process
</span>
</div><br />
<div>
<label class="leftalign">Pre-loan equipment/project description(e.g. coal fired boiler,efficiency 66%)</label><span>*</span>
<input type="text" name="txtPreLoanEquipment"id="txtPreLoanEquipment"class="rightalign"/>
</div><br />
<div>
<label class="leftalign">Post-loan equipment/project description(e.g. gas boiler,efficiency 78%)</label><span>*</span>
<input type="text" name="txtPostLoanEquipment"id="txtPostLoanEquipment"class="rightalign"/>
</div><br />
</div>
<div class="divTable">
<div class="divRow">
<div class="divCell"><b>Form of Energy</b><span>*</span></div>
<div class="divCell"><b>Current pre-loan consumption</b><span>*</span></div>
<div class="divCell"><b>Units</b><span>*</span></div>
<div class="divCell"><b>Expected post-loan consumption</b><span>*</span></div>
<div class="divCell"><b>Units</b></div>
</div>
<div class="divRow">
<div class="divCell">Electricity</div>
<div class="divCell"><input type="text" name="txtPreLoanElectricity"id="txtPreLoanElectricity"/></div>
<div class="divCell">
<select name="ddlElectricityUnits"id="ddlElectricityUnits"class="rightalign"style="width:150px;">
<option value="kWh/yr">kWh/yr</option>
<option value="MWh/yr">MWh/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanElectricity"id="txtPostLoanElectricity"/></div>
<div class="divCell"><label id="txtElectricityUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Heat</div>
<div class="divCell"><input type="text" name="txtPreLoanHeat"id="txtPreLoanHeat"/></div>
<div class="divCell">
<select name="ddlHeatUnits"id="ddlHeatUnits"class="rightalign selection" style="width:150px;">
<option value="btu/yr">btu/yr</option>
<option value="GJ/yr">GJ/yr</option>
<option value="kcal/yr">kcal/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanHeat"id="txtPostLoanHeat"/></div>
<div class="divCell"><label id="txtHeatUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Natural Gas</div>
<div class="divCell"><input type="text" name="txtPreLoanNaturalGas"id="txtPreLoanNaturalGas"/></div>
<div class="divCell">
<select name="ddlNaturalGasUnits"id="ddlNaturalGasUnits"class="rightalign"style="width:150px;">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanNaturalGas"id="txtPostLoanNaturalGas"/></div>
<div class="divCell"><label id="txtNaturalGasUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Crude Oil</div>
<div class="divCell"><input type="text" name="txtPreLoanCrudeOil"id="txtPreLoanCrudeOil"/></div>
<div class="divCell">
<select name="ddlCrudeOilUnits"id="ddlCrudeOilUnits"class="rightalign"style="width:150px;">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanCrudeOil"id="txtPostLoanCrudeOil"/></div>
<div class="divCell"><label id="txtCrudeOilyUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Gasoline</div>
<div class="divCell"><input type="text" name="txtPreLoanGasoline"id="txtPreLoanGasoline"/></div>
<div class="divCell">
<select name="ddlGasolineUnits"id="ddlGasolineUnits"class="rightalign"style="width:150px;">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanGasoline"id="txtPostLoanGasoline"/></div>
<div class="divCell"><label id="txtGasolineUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Diesel</div>
<div class="divCell"> <input type="text" name="txtPreLoanDiesel"id="txtPreLoanDiesel"/></div>
<div class="divCell">
<select name="ddlDieselUnits"id="ddlDieselUnits"class="rightalign"style="width:150px;">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanDiesel"id="txtPostLoanDiesel"/></div>
<div class="divCell"><label id="txtDieselUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Biodiesel</div>
<div class="divCell"><input type="text" name="txtPreLoanBiodiesel"id="txtPreLoanBiodiesel"/></div>
<div class="divCell">
<select name="ddlBiodieselUnits"id="ddlBiodieselUnits"class="rightalign"style="width:150px;">
<option value="kg/yr">kg/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanBiodiesel"id="txtPostLoanBiodiesel"/></div>
<div class="divCell"><label id="txtBiodieselUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Coking Coal</div>
<div class="divCell"><input type="text" name="txtPreLoanCoakingCoal"id="txtPreLoanCoakingCoal"/></div>
<div class="divCell">
<select name="ddlCokingCoalUnits"id="ddlCokingCoalUnits"class="rightalign"style="width:150px;">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanCoakingCoal"id="txtPostLoanCoakingCoal"/></div>
<div class="divCell"><label id="txtCoakingCoalUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Compressed natural gas</div>
<div class="divCell"><input type="text" name="txtPreLoanCompressed"id="txtPreLoanCompressed"/></div>
<div class="divCell">
<select name="ddlCompressedUnits"id="ddlCompressedUnits"class="rightalign"style="width:150px;">
<option value="kg/yr">kg/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanCompressed"id="txtPostLoanCompressed"/></div>
<div class="divCell"><label id="txtCompressedUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Liquified petroleum gas</div>
<div class="divCell"><input type="text" name="txtPreLoanLiquifiedGas"id="txtPreLoanLiquifiedGas"/></div>
<div class="divCell">
<select name="ddlLiquifiedGasUnits"id="ddlLiquifiedGasUnits"class="rightalign"style="width:150px;">
<option value="kg/yr">kg/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanLiquifiedGasy"id="txtPostLoanLiquifiedGas"/></div>
<div class="divCell"><label id="txtLiquifiedGasUnitss"></label></div>
</div>
</div>
<div class="divTable">
<div class="divRow">
<div class="divCell"><b>Form of Energy</b><span>*</span></div>
<div class="divCell"><b>Current pre-loan consumption</b><span>*</span></div>
<div class="divCell"><b>Units</b><span>*</span></div>
<div class="divCell"><b>Expected post-loan consumption</b><span>*</span></div>
<div class="divCell"><b>Units</b></div>
</div>
<div class="divRow">
<div class="divCell">Electricity</div>
<div class="divCell"><input type="text" name="txtPreLoanElectricity"id="txtPreLoanElectricity" class="respowidth"/></div>
<div class="divCell">
<select name="ddlElectricityUnits"id="ddlElectricityUnits"class="rightalign align">
<option value="kWh/yr">kWh/yr</option>
<option value="MWh/yr">MWh/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanElectricity"id="txtPostLoanElectricity" class="respowidth"/></div>
<div class="divCell"><label id="txtElectricityUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Heat</div>
<div class="divCell"><input type="text" name="txtPreLoanHeat"id="txtPreLoanHeat" class="respowidth"/></div>
<div class="divCell">
<select name="ddlHeatUnits"id="ddlHeatUnits"class="rightalign align">
<option value="btu/yr">btu/yr</option>
<option value="GJ/yr">GJ/yr</option>
<option value="kcal/yr">kcal/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanHeat"id="txtPostLoanHeat" class="respowidth"/></div>
<div class="divCell"><label id="txtHeatUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Natural Gas</div>
<div class="divCell"><input type="text" name="txtPreLoanNaturalGas"id="txtPreLoanNaturalGas" class="respowidth"/></div>
<div class="divCell">
<select name="ddlNaturalGasUnits"id="ddlNaturalGasUnits"class="rightalign align">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanNaturalGas"id="txtPostLoanNaturalGas" class="respowidth"/></div>
<div class="divCell"><label id="txtNaturalGasUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Crude Oil</div>
<div class="divCell"><input type="text" name="txtPreLoanCrudeOil"id="txtPreLoanCrudeOil" class="respowidth"/></div>
<div class="divCell">
<select name="ddlCrudeOilUnits"id="ddlCrudeOilUnits"class="rightalign align">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanCrudeOil"id="txtPostLoanCrudeOil" class="respowidth"/></div>
<div class="divCell"><label id="txtCrudeOilyUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Gasoline</div>
<div class="divCell"><input type="text" name="txtPreLoanGasoline"id="txtPreLoanGasoline" class="respowidth"/></div>
<div class="divCell">
<select name="ddlGasolineUnits"id="ddlGasolineUnits"class="rightalign align">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanGasoline"id="txtPostLoanGasoline" class="respowidth"/></div>
<div class="divCell"><label id="txtGasolineUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Diesel</div>
<div class="divCell"> <input type="text" name="txtPreLoanDiesel"id="txtPreLoanDiesel" class="respowidth"/></div>
<div class="divCell">
<select name="ddlDieselUnits"id="ddlDieselUnits"class="rightalign align">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanDiesel"id="txtPostLoanDiesel" class="respowidth"/></div>
<div class="divCell"><label id="txtDieselUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Biodiesel</div>
<div class="divCell"><input type="text" name="txtPreLoanBiodiesel"id="txtPreLoanBiodiesel" class="respowidth"/></div>
<div class="divCell">
<select name="ddlBiodieselUnits"id="ddlBiodieselUnits"class="rightalign align">
<option value="kg/yr">kg/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanBiodiesel"id="txtPostLoanBiodiesel" class="respowidth"/></div>
<div class="divCell"><label id="txtBiodieselUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Coking Coal</div>
<div class="divCell"><input type="text" name="txtPreLoanCoakingCoal"id="txtPreLoanCoakingCoal" class="respowidth"/></div>
<div class="divCell">
<select name="ddlCokingCoalUnits"id="ddlCokingCoalUnits"class="rightalign align">
<option value="litre/yr">litre/yr</option>
<option value="m3/yr">m3/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanCoakingCoal"id="txtPostLoanCoakingCoal" class="respowidth"/></div>
<div class="divCell"><label id="txtCoakingCoalUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Compressed natural gas</div>
<div class="divCell"><input type="text" name="txtPreLoanCompressed"id="txtPreLoanCompressed" class="respowidth"/></div>
<div class="divCell">
<select name="ddlCompressedUnits"id="ddlCompressedUnits"class="rightalign align">
<option value="kg/yr">kg/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanCompressed"id="txtPostLoanCompressed" class="respowidth"/></div>
<div class="divCell"><label id="txtCompressedUnitss"></label></div>
</div>
<div class="divRow">
<div class="divCell">Liquified petroleum gas</div>
<div class="divCell"><input type="text" name="txtPreLoanLiquifiedGas"id="txtPreLoanLiquifiedGas" class="respowidth"/></div>
<div class="divCell">
<select name="ddlLiquifiedGasUnits"id="ddlLiquifiedGasUnits"class="rightalign align">
<option value="kg/yr">kg/yr</option>
<option value="tonne/yr">tonne/yr</option>
</select>
</div>
<div class="divCell"><input type="text" name="txtPostLoanLiquifiedGasy"id="txtPostLoanLiquifiedGas" class="respowidth"/></div>
<div class="divCell"><label id="txtLiquifiedGasUnitss"></label></div>
</div>
</div>
<div class="divAlign">
<h4><center>Production details</center></h4>
<div>
<label class="leftalign">Production units<br />(e.g.Tonnes,Kg,m3,or widgets etc.)</label><span>*</span>
<input type="text" name="txtProductionUnit"id="txtProductionUnit"class="rightalign"/>
</div><br />
<div>
<label class="leftalign">Annual pre-loan production</label><span>*</span>
<input type="text" name="txtAnnualPreProduction"id="txtAnnualPreProduction"class="rightalign"/>
</div><br />
<div>
<label class="leftalign">Annual post-loan production</label><span>*</span>
<input type="text" name="txtAnnualPostProduction"id="txtAnnualPostProduction"class="rightalign"/>
</div><br />
</div>
<div class="divAlign">
<h4><center>Eligibility results</center></h4>
<div>
<label class="leftalign">Pre-loan specific energy use</label>
<input type="text" name="txtPreSpecificEnergyUse"id="txtPreSpecificEnergyUse"class="rightalign"/>
</div><br />
<div>
<label class="leftalign">Post-loan specific energy use</label>
<input type="text" name="txtPostSpecificEnergyUse"id="txtPostSpecificEnergyUse"class="rightalign"/>
</div><br />
<div>
<label class="leftalign"><b>Eligibility indicator</b></label>
<input type="text" name="txtEligibilityIndicator"id="txtEligibilityIndicator"class="rightalign"/>
</div><br />
<div>
<label class="leftalign"></label>
<label class="alignment"><b>Project Eligible</b></label>
</div><br />
<div>
<label class="leftalign"><b>Annual energy savings</b></label>
<input type="text" name="txtAnnualEnergySavings"id="txtAnnualEnergySavings"class="rightalign"/>
</div><br />
<div>
<label class="leftalign"><b>Enter optional EE loan details?</b></label>
<span class="alignment">
<input type="radio" name="radEELoanDetails" value="Yes"/>Yes
<input type="radio" name="radEELoanDetails" value="No"/>No
</span>
</div>
</div><br />
<div>
<input type="button" id="btnSave" name="btnSave" value="Save" />
<input type="button" id="btnValidate" name="btnValidate" value="Validate & Next" />
<input type="button" id="btnSubmit" name="btnSubmit" value="Submit" />
</div>
</form>
</div>
</div>
My ipad.css file is
.body
{
width:100%;
}
#wrapper
{
width:100%;
}
#container
{
width:100%;
}
#frmEnergyEfficiency
{
width:100%;
height:900px;
margin:0px auto;
}
.leftalign
{
text-align:left;
padding-left:2px;
}
.rightalign
{
float:right;
padding-right:2px;
}
.alignment
{
width:100%;
float:right;
padding-right:0px;
}
.divTable{
display:table;
width:790px;
border-spacing:5px;
}
.divRow{
display:table-row;
width:790px;
clear:both;
}
.divCell{
float:left;
display:table-column;
width:100%;
}
.divAlign
{
text-align:left;
width:400px;
}
.divAlign1
{
text-align:left;
width:100%;
}
.align
{
width:100px;
}
My ipad1.css file is
.body
{
width:100%;
}
#wrapper
{
width:100%;
}
#container
{
width:100%;
}
#frmEnergyEfficiency
{
width:100%;
height:900px;
margin:0px auto;
}
.leftalign
{width:100%;
text-align:left;
padding-left:2px;
}
.rightalign
{width:100%;
float:right;
padding-right:2px;
}
.respowidth
{
width:100%;
}
.alignment
{width:100%;
float:right;
padding-right:0px;
}
.divTable{
display:table;
border-spacing:5px;
}
.divRow{
display:table-row;
width:100%;
clear:both;
}
.divCell{
float:left;
display:table-column;
width:100%;
}
.divAlign
{
text-align:left;
width:100%;
}
.divAlign1
{
text-align:left;
width:100%;
}
Make sure you use "%" instead of "px" in your design...that means for container of 100% inside element with padding or margin shud be in percentage...
Percentage will make your job done in quick this...
Also try implement viewport script on the header,
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
For example,
.class1 {
width:100%;
float:right;
padding-right:2px;
}
.class2 {
width:600px;
}
can be written as,
.class1 {
width:99%;
float:right;
padding-right:1%;
}
.class2 {
width:70%;
}
Also replace the css linkages,
<link rel="stylesheet" media="only screen and (max-width:724px)" href="ipad.css">
<link rel="stylesheet" media="only screen and (max-width:424px)" href="ipad1.css">
to this
<link href="ipad.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" /> //For Tablet
<link href="ipad1.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" /> //For mobile
For input boxes, try float the form elements,
For example,
<div class="form-contain"><label>Name</label><div class="input-contain"><input type="text" /></div></div>
.form-contain { overflow:hidden; }
.form-contain label { width:30%; text-align:right; float:left; }
.form-contain .input-contain { width:70%; float:left; }
.form-contain .input-contain input { width:100%; }
For mobile keep the width to 100%....