I have been working on a website and I want to hide a specific section for users viewing it on small screens. I tried using Bootstrap's .hidden-xs class, but when I tested it using Chrome's mobile emulator set to "iPhone 5", the div did not hide as expected. Am I implementing the class incorrectly?
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;
}
Check out this JSFiddle link for a demo of my code: https://jsfiddle.net/James_Parsons/jwqdbn61/
UPDATE
It seems that an iPhone 5 screen is not considered small enough. If I add both the .hidden-xs and .hidden-sm classes, will the section be hidden across all small devices?