Saya telah membuka halaman yang tak terhitung jumlahnya di Stack tetapi tidak berhasil. Saya mencoba menghilangkan footer saya di perangkat seluler menggunakan kueri media. Sayangnya catatan ini tampaknya berfungsi pada perangkat, namun ini berfungsi di browser desktop jika Anda meminimalkan layar. Setiap ide akan sangat dihargai.
Footernya ada dalam pernyataan include.
Ini Kode saya:
<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="/idmailto:{{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>
Ini CSS saya:
<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
}
