Media query not working, hiding Bootstrap jumbotron when viewed from mobile device - twitter-bootstrap-3

Question

can't get media query to work, trying to hide jumbotron when viewed from mobile device.
url tyrescanner.net
code below
/* Extra Small Devices, Phones */
#media screen and (max-width: 380px) {
.customjumbotron{
background-color: black;
}
}
<div class="row no-container">
<div class="col-md-12">
<div class="jumbotron text-center customjumbotron">
<img class="img-responsive image-center" src="../Images/Nectar-CollectPoints.png" height="130" width="490" style= "margin-bottom: -10px"" />
<h2>Search for tyres and prices in your local area</h2>
<div class="searchbox">
<div class="input-group input-group-lg">
<div class="input-btn-toolbar" style="width:107%; height: 100%;">
<div class="input-btn-toolbar" style=" background-color:#313131; padding-left:5px; padding-top:7px; padding-bottom:3px; padding-right:3px;">
<asp:TextBox style="text-transform: uppercase; width:100%; font-size: 23px; text-align: center;" ID="txtReg" class="form-control" runat="server" placeholder="Enter Registration"></asp:TextBox>
<span class="input-group-btn" >
<asp:LinkButton class ="btn btn-default btn-default1" OnClick="ButtonSearch_Click" height="49" runat="server" type="button" style="color:white" ID="bntSearch"><span aria-hidden="true" class="glyphicon glyphicon-search"></span></asp:LinkButton>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

To make the jumbotron appear as a black background on small screens, add color: black; to your media query. That way, everything in the jumbotron will appear black (though there are probably much more elegant ways to do it).
Working example:
/* Extra Small Devices, Phones */
#media screen and (max-width: 380px) {
.customjumbotron{
background-color: black;
color: black;
}
#imgID {
display: none;
}
#imgHide {
display: block;
}
}
/* Larger Devices */
#media screen and (min-width: 381px) {
#imgHide {
display: none;
}
}
<div class="row no-container">
<div class="col-md-12">
<div class="jumbotron text-center customjumbotron">
<img class="img-responsive image-center" id="imgID" src="../Images/Nectar-CollectPoints.png" height="130" width="490" style="margin-bottom: -10px" />
<img class="img-responsive image-center" id="imgHide" src="" height="130" width="490" style="margin-bottom: -10px"></div>
<h2>Search for tyres and prices in your local area</h2>
<div class="searchbox">
<div class="input-group input-group-lg">
<div class="input-btn-toolbar" style="width:107%; height: 100%;">
<div class="input-btn-toolbar" style=" background-color:#313131; padding-left:5px; padding-top:7px; padding-bottom:3px; padding-right:3px;">
<asp:TextBox style="text-transform: uppercase; width:100%; font-size: 23px; text-align: center;" ID="txtReg" class="form-control" runat="server" placeholder="Enter Registration"></asp:TextBox>
<span class="input-group-btn" >
<asp:LinkButton class ="btn btn-default btn-default1" OnClick="ButtonSearch_Click" height="49" runat="server" type="button" style="color:white" ID="bntSearch"><span aria-hidden="true" class="glyphicon glyphicon-search"></span></asp:LinkButton>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT: Now hides the image in the jumbotron for small screens.

Answer 2

I fund the problem, I had to add another Media query to the Jumbotrom
#media only screen and (min-width : 992px) {
.customjumbotron {
/*.jumbotron*/
background: url('../Images/Tyre.jpg') no-repeat center center;
background-size: cover;
background-attachment: fixed;
min-height: 410px;
min-width: 100%;
width: 100%;
margin-right: 0px !important;
margin-left: 0px !important;
margin-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
}
}

Answer 3

First identify what kind of iPhone you need to make it hide read iPhone 6 Screen Size and Web Design Tips first. Then use the points of different iPhone versions to add value for max-width or min-width to create changes, you can use either of the two. But take note of other devices breakpoints not only iPhone if you add breakpoints of more than one iPhone version breakpoints. I use in the sample codes below the minimum width of the largest iPhone version in order for your design make changes for all iPhone easily, but it depends:
USING LARGEST iPHONE VERSION MINIMUM POINTS:
<style type="text/css">
/* iPhone 6/7 Plus | 414 x 736 points */
#media only screen and (max-width : 414px) {
body{
background-color: teal;
}
.customjumbotron{
display: none;
}
}
</style>
USING iPHONE VERSION MAX-WIDTH:
<style type="text/css">
/* iPhone 4 | 320 x 480 points */
#media only screen and (max-width : 480px) {
body{
background-color: gold;
}
.customjumbotron{
display: none;
}
}
/* iPhone 5 | 320 x 568 points */
#media only screen and (max-width : 568px) {
body{
background-color: silver;
}
.customjumbotron{
display: none;
}
}
/* iPhone 6/7 | 375 x 667 points */
#media only screen and (max-width : 667px) {
body{
background-color: teal;
}
.customjumbotron{
display: none;
}
}
/* iPhone 6/7 Plus | 414 x 736 points */
#media only screen and (max-width : 736) {
body{
background-color: teal;
}
.customjumbotron{
display: none;
}
}
</style>
USING DIFFERENT iPHONE VERSION MIN-WIDTH:
<style type="text/css">
/* iPhone 4 | 320 x 480 points */
#media only screen and (min-width : 320px) {
body{
background-color: gold;
}
.customjumbotron{
display: none;
}
}
/* iPhone 5 | 320 x 568 points */
#media only screen and (min-width : 320px) {
body{
background-color: silver;
}
.customjumbotron{
display: none;
}
}
/* iPhone 6/7 | 375 x 667 points */
#media only screen and (min-width : 375px) {
body{
background-color: teal;
}
.customjumbotron{
display: none;
}
}
/* iPhone 6/7 Plus | 414 x 736 points */
#media only screen and (min-width : 414px) {
body{
background-color: teal;
}
.customjumbotron{
display: none;
}
}
</style>
DEFAULT BOOTSTRAP MEDIA QUERIES
<style type="text/css">
/*==================================================
Bootstrap 3 Media Queries
==================================================*/
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
/* YOUR CODE HERE|EXAMPLE CODES*/
body{
background-color: black;
}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
/* YOUR CODE HERE|EXAMPLE CODES*/
body{
background-color: blue;
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
/* YOUR CODE HERE|EXAMPLE CODES| SET HERE WHAT YOU NEED TO HIDE OR ANYTHING*/
body{
background-color: green;
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
/* YOUR CODE HERE*/
}
</style>