How to set css for chrome and mozila for responsive design?
Question
I am new to CSS, Bootstrap & HTML.
I am trying to display search-box on my web page, in Mozilla it works fine but in Chrome it is not working.
Here is the screen shot of Mozilla browser:
and this is of Chrome:
Also note that when i increase or decrease screen resolution the control's gets scattered badly .Following is HTML code snippet responsible for this display:
<body>
<section id="customers">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12
<form class="form-inline" role="form" style="background:#eee">
<div class="form-group">
<input id="" class="leftText" type="text" value="" tabindex="1" name="query" autocomplete="off" placeholder="I am looking for" ></input>
<strong >in</strong>
<input id="" class="rigtTextBox" type="text" value="" tabindex="1" name="query" autocomplete="off" helptext="In the location" placeholder="In the location"></input>
<select class="rightcitydropdown">
<option>Mumbai</option>
<option>Pune</option>
</select>
</div>
<button class="btn btn-primary" id="srchBtn" >Ask Me</button>
</div><!--end of col-lg-12-->
</form>
</div><!--end of row-->
</div><!--end of container-->
</section>
</body>
following in my CSS for above controls:
.leftText{
float :left;
border-style:solid;
border-width:5px;
border-color:#989898 ;
height:38px;
}
.rigtTextBox{
border-style:solid;
border-width:5px;
border-right-width:1px;
height:38px;
border-color:#989898 ;
}
.form-control{
border-style:solid;
border-width:5px;
border-left-width:1px;
border-color:#eee;
font-size:10px;
height:30px;
}
.form{
border-width:5px;
border-left-width:1px;
border-color:#eee;
font-size:10px;
}
.rightcitydropdown{
float:right;
border-style:solid;
border-width:5px;
border-left-width:1px;
border-color:#989898 ;
margin-right:17px;
background:white;height:38px;
}
#searchOuterdiv{
background:#F0F0F0;
}
#centralRow{
margin-top:3px;
}
strong { float:left; font-size:28px; margin:0px 10px 0 10px; height:30px; line-height:30px; color:#333333; }
#srchBtn { background:#4682B4; font-size:18px; line-height:16px;
border:none; width:125px; text-align:center;margin-top:6px;
height:35px; padding-bottom:5px; cursor:pointer; color:#333; padding-top:0px; margin-left:7px;color:white}
So please, can any one tell me how to set CSS or correct written code to make responsive appearance.I want this page to be displayed on multiple resolution screens, say desktop,laptop,tablets etc Thanks in advance.
2 answers
solution1
0 2013-10-09 10:45:53
I would recommend looking at something like http://sass-lang.com/
There's really no "easy" answer when it comes to designs looking the same across different browsers, let someone else deal with it for you
Also, http://dowebsitesneedtolookexactlythesameineverybrowser.com/
solution2
0 2013-10-09 11:14:03
you can use the media queries
Ex.
@media only screen and (min-width: 768px) and (max-width: 959px) {
.box {
color:#9d9d9d;
font-size:12px;
line-height:18px;
margin: 0 auto;
padding: 0;
position: relative;
width: 960px;
}
}
And inside it, you can declared this class for firefox:
.box, x:-moz-any-link, x:default { color:#000; }
so, the class box, for Chrome,IE,opera and safari will have the color #9d9d9d while firefox will have #000.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.