responsive layout with Bootstrap,.visible-phone not working - css

Question

Trying to hide two banners when users are using phone, but using the classs such as .visible-phone or visible-desktop not working.
I then searched and thought maybe by adding the .less and less.js would solve the issue but failed either.
Code in HTML:
<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/css/site.css" />
<link type='text/css' href='/js/jquery.simplemodal.css' rel='stylesheet' media='screen' />
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="css/less/responsive.less">
<script type="text/javascript" src="/js/jquery.js" ></script>
<script type="text/javascript" src="/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/js/site.js" ></script>
<script type='text/javascript' src='/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='/js/less.min.js'></script>
... I need to hide the banners when view on phones:
<div class="hidden-phone">
<div id="banner0" class="hidden-phone">
<div class="container-fluid">
<div id="index_slider">
<div class="banner-product">
<div class="mask">
<div class="banner-text">
<h1>...</h1>
<br>
<h5>...</h5>
<div class="banner-button">
<strong>...
</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="banner1" class="hidden-phone">
<div class="container-fluid">
<div id="index_slider">
<div class="banner-product">
<div class="uploadmask">
<div class="banner-text">
<h1>...<br>
</h1>
<br>
<h5>...</h5>
<div class="banner-button">
<strong>...
</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
... I need to show the video only when it is on desktop:
<div class="visible-desktop">
<p align=center>View Demo</p>
<br>
</div>
</div>
There are scripts binding on the banners, would this be the issue?
<script type="text/javascript">
function bindMouse(){
var _o1=document.getElementById("online");
var _o2=document.getElementById("banner1");
var _o3=document.getElementById("desktop");
var _o4=document.getElementById("banner0");
_o1.onmousemove=function(){
_o2.style.display="block";
_o4.style.display="none";
};
_o3.onmousemove=function(){
_o4.style.display="block";
_o2.style.display="none";
}
}
bindMouse();
$(document).ready(function(){
loadImage("/images/Backbanner.jpg",function(img){$("#banner0").css("background","#b9c0d0 url(" + img.src + ") top center no-repeat");});
loadImage("/images/banner-another.jpg",function(img){$("#banner1").css("background","#000000 url(" + img.src + ") top center no-repeat");});
})
function loadImage(url, callback) {
var img = new Image();
img.src = url;
$(img).load(function(){
if (this.complete||this.readyState=="complete") {
callback(img);
return;
}
})
}
</script>

Answer 1

Did you try just puting the display property to none when he is on phone?
In css you could do
/* Phone */
#media only screen and (max-width: 760px) {
.hidden-phone{
display: none;
}
}
Just adapt to your classes and it should be enough for what you are asking i think