overflowstack9 overflowstack9 - 4 months ago 6
CSS Question

How can i make my code responsive for Mozilla Firefox

This is my blog i have implement select tags with values. My problem is the tags are displaying properly in chrome browser.

But when i open the blog in Mozilla browser it stretches the tags from left to right like in the below image you can view it. How can i make it responsive for Mozilla Firefox and also for all browsers.

Imz

The below is my code.



<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }

.k-input {
font-weight:bold !important;
font-size:12pt !important;
color: green !important;
}


::-webkit-input-placeholder {
color: green;
}

::-webkit-input-placeholder {
color: green;
font-weight: 800;
}

:-moz-placeholder { /* Firefox 18- */
color: green;
font-weight: 800;
}

::-moz-placeholder { /* Firefox 19+ */
color: green;
font-weight: 800;
}

:-ms-input-placeholder {
color: green;
font-weight: 800;
}

.container:hover{
background-color:#F0F2F3;
}

</style>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

<div class="container" style="overflow: hidden;
border: 1px solid gray;
width: 465px;
margin-left: -180px;
padding: 30px 70px 30px 170px;">


<div id="example" role="application" style="float:left;width:49%; margin-right:2%;margin-left: -32%;">
<div id="select" class="demo-section k-content">


<select id="size" placeholder="Skills, Designations...." style="width: 230px;border-width: 2px !important; border-color: #D8D3D3 !important;" >
<option />
<option />to
<option />code
<option />way
<option />always
<option />easily
</select>


</div>
</div>

<div id="example1" role="application" style="float:left;width:49%;margin-right:0;margin-left: -5px;">
<div id="select" class="demo-section k-content">


<select id="size1" placeholder="Location" style="width: 140px;border-width: 2px !important; border-color: #D8D3D3 !important;" >
<option />
<option />Delhi
<option />Bangalore
<option />Jammu and kashmir
<option />ahmedabad
<option />Arunachal Pradesh
</select>


</div>
</div>

<div id="example2" role="application" style="
float: right;
margin-left: 95px;
width: 49%;
margin-right: 14px;
margin-top: -47px;">
<div id="select" class="demo-section k-content">


<select id="size2" placeholder="Exp(Years)" style="width: 114px;border-width: 2px !important; border-color: #D8D3D3 !important;
" >
<option />
<option />0 Year
<option />1
<option />2
<option />3
<option />4
</select>


</div>
</div>


<div id="example3" role="application" style="float:right;width:49%;margin-right:-102px;margin-top: -47px;">
<div id="select" class="demo-section k-content">


<select id="size3" placeholder="Salary" style="width: 100px;border-width: 2px !important; border-color: #D8D3D3 !important;
">
<option />
<option />&lt;1 Lac
<option />2
<option />3
<option />4
</select>


</div>
</div>
</div>





<script>
$(document).ready(function() {
// create ComboBox from input HTML element

// create ComboBox from select HTML element
$("#size").kendoComboBox();
$("#size1").kendoComboBox();
$("#size2").kendoComboBox();
$("#size3").kendoComboBox();

var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");
var select = $("#size2").data("kendoComboBox");
var select = $("#size3").data("kendoComboBox");

});
</script>




Answer

Tested it on firefox, also removed your inline styles. Check the media query by resizing the browser when you open the snippet.

You'll have to click full page on the snippet to view the responsiveness.

html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }

.k-input {  
    font-weight:bold !important; 
    font-size:12pt !important; 
    color: green !important;
}

.container {
  display: flex;
  justify-content: space-between;
}

::-webkit-input-placeholder {
   color: green;
}

::-webkit-input-placeholder {
   color: green;
   font-weight: 800;
}

:-moz-placeholder { /* Firefox 18- */
   color: green;  
   font-weight: 800;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: green;  
   font-weight: 800;
}

:-ms-input-placeholder {  
   color: green;  
   font-weight: 800;
}

 .container:hover{
background-color:#F0F2F3;
}

@media(max-width: 480px) {
  .container {
    flex-direction: column;  
    align-items: flex-start;
  }
}
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

<div class="container" style="">


        <div id="example" role="application" style="">
		    <div id="select" class="demo-section k-content">
           
           
            <select id="size" placeholder="Skills, Designations...." style="" >
              <option />
              <option />to
              <option />code
              <option />way
              <option />always
              <option />easily
            </select>
     
            
        </div>
</div>
        
<div id="example1" role="application" style="">
		    <div id="select" class="demo-section k-content">
           
          
            <select id="size1" placeholder="Location" style="" >
              <option />
              <option />Delhi
              <option />Bangalore
              <option />Jammu and kashmir
              <option />ahmedabad
              <option />Arunachal Pradesh
            </select>
     
            
        </div>
 </div>

<div id="example2" role="application" style="">
		    <div id="select" class="demo-section k-content">
           
           
            <select id="size2" placeholder="Exp(Years)" style="" >
              <option />
              <option />0 Year
              <option />1
              <option />2
              <option />3
              <option />4
            </select>
     
            
        </div>
 </div>


<div id="example3" role="application" style="">
		    <div id="select" class="demo-section k-content">
           
           
            <select id="size3" placeholder="Salary" style="
">
              <option />
              <option />&lt;1 Lac
              <option />2
              <option />3
              <option />4
            </select>
     
            
        </div>
 </div>
</div>





            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    
                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();
 $("#size1").kendoComboBox();
$("#size2").kendoComboBox();
$("#size3").kendoComboBox();
                   
					var select = $("#size").data("kendoComboBox");
var select = $("#size1").data("kendoComboBox");
var select = $("#size2").data("kendoComboBox");
var select = $("#size3").data("kendoComboBox");
				
                });
              </script>