My website name is bookslab.in. It is an ecommerce magento website. My website is responsive except my zipcode section. I want to make that zipcode section responsive in each & every screen of computer like my other pages & sections of my website. I am having the exception for this zipcode section. Any stacky can go to my website & check it out for better understanding. I am facing the problem in mobile & tablet screens. So any help will be appreciated. I had also attached the screenshot. I had also provided the css file & code of this zipcode section.
cod.phtml
<?php
/**************************************
*/
$msgData = Mage::helper('netgo_cod')->getConfigData();
if($msgData['zip_status'] == 1){
?>
<div class="input-box">
<div class="z-btn">
<label>Zip Code : </label><input type="text" placeholder="Enter your pincode" value="" name="cod" class="product-custom-option required-entry" id="cod" size="29" style='color:black; font-size:12px'>
<button type="button" onclick="checkCOD();" name="zip-check" title="Check" class="button" id="zip-check"><span><span>Check</span></span></button>
</div>
<div id="cod_msg"></div>
</div>
<script>
function checkCOD(){
var zipcode;
var cod = $('cod').value;
if(cod == ''){
$('cod_msg').update('<span class="cod-error"><?php echo $msgData['emp_msg']; ?></span>');
return
}else{
$('cod_msg').update('<img src="<?php echo Mage::getBaseUrl( Mage_Core_Model_Store::URL_TYPE_WEB, true ).'media/cod/img/ajax-loader-2.gif';?>">');
new Ajax.Request('<?php echo Mage::getBaseUrl().'netgo/cod/check';?>', {
method:'post',
parameters: {zipcode: cod},
onSuccess: function(transport) {
var response = transport.responseText || "no response text";
$('cod_msg').update(response);
if(response.search('Delivery of the book is not available on the above pincode')!=-1)
{
zipcode='checked';
jQuery('.btn-cart').attr('disabled', 'disabled');
}
else
{
jQuery('.btn-cart').removeAttr('disabled');
}
},
onFailure: function() { alert('Something went wrong...'); }
});
}
}
</script>
<?php } ?>
css file:
/***************************************
*/
div.product-view .add-to-cart{
padding-bottom:15px;
}
div.product-view .add-to-cart-buttons {
float: right;
margin-right: 0px;
max-width: 100%;
width: 82%;
}
.z-btn label {
background: rgba(0, 0, 0, 0) url("img/van-icon.png") no-repeat scroll right 2px top 3px / 96% auto;
float: left;
font-size: 13px;
height: auto;
line-height: 28px;
text-indent: -9999px;
width: 37px;
}
.z-btn input.product-custom-option {
border: 0 none;
float: left;
height: auto;
line-height: 31px;
margin-left: 7px;
width: auto;
}
.z-btn {
background: #ff0000 url("img/pr-opt-bg.jpg") repeat scroll 0 0;
border-radius: 5px;
color: #fff;
float: left;
margin-bottom: 0px;
padding: 10px 15px 15px;
width: 100%;
}
.z-btn button {
background: #000 none repeat scroll 0 0;
float: right !important;
font-size: 13px;
padding: 6px 20px;
/*margin-top: -31px;*/
position: absolute;
}
.input-box > div#cod_msg {
display: inline-block;
float: left;
font-size: 22px;
text-align: center;
width: 100%;
}
.cod-suc,.cod-error{
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: #fff none repeat scroll 0 0;
border-color: -moz-use-text-color #ccc #ccc;
border-image: none;
border-style: none solid solid;
border-width: 0 1px 1px;
float: left;
margin-bottom: 10px;
padding: 2px 11px 3px;
position: relative;
text-align: center;
top: -3px;
width: 100%;
}
#cod_msg img{display:inline-block;float:none;text-align:center;width:3%;}
.cod-error {
color: #ff0000;
}
.cod-suc{
color: #009036;
}
div.product-view .add-to-cart-buttons button#zip-check.button {
line-height: 32px;
min-height: auto;
width: auto;
}