Menu
I am trying to create a site, that will hide an extended section for users on a small screen using Bootstrap's .hidden-xs To test it, I am using Chrome's mobile emulator, setting it to "iPhone 5" (pretty small). When I refresh the page, however, it does not hide the div. Am I using the class wrong?
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/todo.css">
<title>TODO</title>
</head>
<body>
<div class="container-fluid">
<header>
</header>
<div id="left">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<div class="main" class="hidden-xs">
</div>
</div>
</body>
</html>
CSS
/* CSS Document */
body {
margin: 0;
}
header {
height: 10em;
width: 100%;
border-bottom: 1px solid #000000;
}
#left {
float: left;
height: 80%;
max-width: 100%;
width: 20%;
border-right: 1px solid black;
overflow: scroll;
}
#main {
float: left;
width: 80%;
height: 100%;
}
.test {
height: 10em;
background-color: #eeeeee;
width: 100%
}
.test:hover {
background-color: #dddddd;
}
here is a JSFiddle demonstrating my code: https://jsfiddle.net/James_Parsons/jwqdbn61/
EDIT
Apparently an iPhone 5 is not small enough. If I use both .hidden-xs and .hidden-sm will it be hidden on all small devices?
989
The iPhone5 width is 1136px so adding hidden-sm too won't help. You will need to add a custom media query to hide the .main like this:
@media (max-width: 1199px) {
.main {
display: none;
}
}
@media (min-width: 1200px) {
.main {
display: block;
}
}
BUT there are a lot of people using PCs and Laptops with a screen width in that range so you might end up hiding the div for them too.
If you want to hide the div on Phones/Tablets having a large width, then you might have to go with the old school user-agent device detection approach which involves using JavaScript to check if the device is a Phone/Tablet or not.
Also, as Kyle mentioned above, you need to define your main class as well as your hidden-xx query class together like this:
<div class="main hidden-xs">
There are two issues here:
One is that the jsFiddle does not include the viewport tag so the device emulation does not try to resize the viewport. Without that, you cannot take advantage of Bootstrap's responsive class sizes. Make sure to include the following as the first item in your head element:
<meta name="viewport" content="width=device-width, initial-scale=1">
Here's a plunker that includes a runnable instance
The other issue is that you have class defined twice in you main div:
<div class="main" class="hidden-xs">
So if you inspect the element, you'll actually notice that the second class is ignored and you never pull in hidden-xs. Instead add them both separated by a space like this:
<div class="main hidden-xs">
Now it should work fine:
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
