Я просмотрел бесчисленное количество страниц в стеке, но безрезультатно. Я пытаюсь избавиться от нижнего колонтитула на мобильных устройствах с помощью медиа-запроса. К сожалению, это примечание, кажется, работает на устройстве, однако оно работает в настольном браузере, если вы свернете экран. Любые идеи будут высоко оценены.
Нижний колонтитул находится в операторе включения.
Вот мой код:
<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>
Вот мой 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
}
