I have gone though countless page on Stack but to no avail. I am trying to get rid of my footer on mobile devices using a media query. Unfortunately this does note seem to working on the device, however it is working in the desktop browser if you minimize the screen. Any ideas would be much appreciated.
The footer is in an include statement.
Here is my Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body id="footer" is="dmx-app">
<dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/homePage/officerInfo.php"></dmx-serverconnect>
<div class="footer">
<div class="container-fluid">
<div class=row>
<div class="col-lg-4">
<h2 class="footerheading"> Officers</h2>
<div class="footertext" dmx-repeat:repeat1="serverconnect1.data.ptoOfficers">
<table width="549" height="46" class="footertext">
<tbody>
<tr>
<td class="footerposition">{{col_position}}</td>
<td class="footername">{{col_firsrtName}} {{col_lastName}}</td>
<td class="footerphone">{{col_phone}}</td>
<td> <a href="mailto:{{col_email}}" class="footeremail">{{col_email}}</a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-4">
<h2 class="footerheading">Navigate</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-lg-4">
<h2 class="footerheading">Stay in Contact!</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/* dmxServerAction name "ptoOfficersExecutor" */
jQuery.dmxServerAction(
{"id": "ptoOfficersExecutor", "url": "../dmxConnect/api/homePage/officerInfo.php", "method": "GET", "sendOnSubmit": false, "sendOnReady": true, "data": {}}
);
/* END dmxServerAction name "ptoOfficersExecutor" */
</script>
</body>
</html>
Here is my CSS:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@charset "UTF-8";
.navbar-nav> li > a {
font-family: 'Arial';
font-weight: bold;
color: #000000;
font-size: 13px;
}
.dropdown-menu > li > a {
font-family: 'Arial';
font-weight: bold;
color: #000000;
font-size: 13px;
}
.navbar-default {
border-color: #000000;
}
.nav.navbar-nav a:hover {
color: #206E38;
}
.dropdown-menu .dropdown .dropdown-toggle a {
font-family: 'Arial';
font-weight: bold;
font-size: 12px;
}
.banner {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,206e38+100&1+0,0.52+43,1+100 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(159,193,169,0.52) 43%, rgba(32,110,56,1) 100%); /* FF3.6-15 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#206e38',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.ptobigtitle {
font-family:'Anton', sans-serif;
padding: 10px;
}
.ptosubtitle {
font-family: 'Anton', sans-serif;
padding-left: 10px;
font-size: 30px;
color: #535252;
}
.navbar-btn {
float: right;
}
.btn-default {
background-color: #206E38;
color:#FFF;
}
.jumbotronimg {
float: right;
}
.learnmorebtn {
margin-left: 350px;
}
.articleheadline{
font-family: 'Anton', sans-serif;
font-size: 20px;
background: #A1C2AB;
color: #000;
letter-spacing: 2px;
padding: 5px;
max-width: 400px;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
border-style: solid;
border-width: 1px;
}
.info{
text-align: center;
top: 37px;
}
.rightinfo{
text-align: center;
}
.footer {
display: none;
}
@media (min-width: 767px) {
.footer {
display:block;
background:#CDCDCD;
overflow:hidden;
margin-bottom: 0;
postion: fixed;
height: auto;
bottom: 0;
width: 100%;
clear: both;
}
}
.bottomfooter {
color:#FFF;
font-family: 'Arial';
font-size: 10px;
background: #CDCDCD;
bottom: 0;
}
.mailsignup{
background: #CDCDCD;
font-family: 'Arial';
font-size: 8px;
}
.footerheading {
font-family: 'Anton', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: underline;
padding-left: 30px;
}
.form-inline{
background: #CDCDCD;
}
#mc_embed_signup .button {
font-family: "Arial";
font-size: 13px;
background-color: #206E38;
padding: 5px;
padding-top: 2px;
text-align: center;
}
.callistcontainer {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 300px;
overflow: scroll;
}
.footertext{
font-size: 10px;
padding-left:10px;
table-layout: fixed;
width: 96%;
height: auto;
text-align: left;
}
.footerposition{
font-weight: bold;
text-align: right;
padding-right: 10px;
border-right: solid;
border-width: 1px
}
.footername{
border-width: 1px;
text-align: center;
}
.footerphone{
border-width: 1px;
text-align: center
}
.footeremail {
padding-left: 10px;
border-width: 1px;
text-align: center
}
