javascript - 有人知道为什么这些元素会出现在移动网站上吗？

Question

我正试图找到一种方法从我的页面的移动版本中删除两个元素 https://newsotuniverse.blogspot.ca/无济于事。无论我做什么，“时事通讯”和“Threetabs”这两个元素都会继续出现在我的移动网站上。有人知道如何在让它们出现在桌面网站上的同时摆脱它们(在移动网站上)吗？
只是一小段代码(通过检查元素来全面浏览我的页面):

<form action='https://feedburner.google.com/fb/a/mailverify?uri=NewsOfTheUniverse&amp;loc=en_US' class='sub-dd' method='post'  onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=NewsOfTheUniverse&amp;loc=en_US, &apos;popupwindow&apos;, scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<h5><b>Subscribe</b> <i>to</i> Newsletter </h5>
<input class='lite' name='email' placeholder='Enter your Email' type='text'/> <input name='uri' type='hidden' value='News of the Universe'/><input name='loc' type='hidden' value='en_US'/>
<input class='buter' type='submit' value='Submit'/> </form>

<div class='threetabs' >
<ul class='tabber wrap-tabs'>
<li class='keez'><a href='#id2'>Popular Posts</a></li>
<li class='keez'><a href='#id3'>Comments</a></li>
<li class='keez'><a href='#id4'>Category</a></li>
</ul>
<div class='clear'/>

这是 CSS:

.ct-wrapper {background:#fff; padding:0px 0px; position:relative; margin: 0px;}
.outer-wrapper {background-image: url("https://cdn.spacetelescope.org/archives/images/screen/potw1209a.jpg"); position: relative; padding:0px 0 }
.header-wrapper {display: inline-block; float: left; padding: 0; width: 100%; -moz-box-sizing: -webkit-border-box; box-sizing: border-box; }
.main-wrapper {background:#fff; width:75%; float:left;}
#content { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative;}
.main-inner-wrap {padding:0 16px; margin: 0px; border-right:1px solid #eee; border-left:1px solid #eee; background:$(post.background.color); float:right; position: relative; width:76.2%;}
.sidebar-wrapper { background:#fff; width:325px; float: right;}



.leftbar-wrapper{width:160px; float: left;}
.container {margin: 0 auto; margin-top: 100px padding: 0 15px; position: relative; max-width: 1300px; display:flex;}
.containerr {margin: 0 auto; margin-top: 100px padding: 0 15px; position: relative; max-width: 1300px;}

body#layout #top-nav { margin-top: 40px; } 
body#layout #header, body#layout .header-right { width: 46%; }
body#layout .main-wrapper {width:69%; }
body#layout .main-inner-wrap {width:64%; }
body#layout .sidebar-wrapper {width:30%; }
body#layout .widget-content { margin: 0; }
body#layout .footer {width:30%;}
body#layout .outer-wrapper, body#layout .main-inner-wrap, body#layout .sidebar-wrapper, body#layout .ct-wrapper { margin: 0; padding: 0; }
.ct-wrapper, .crosscol, .post, .sidebar-wrapper, .buzed{overflow:hidden;}

这是手机代码:

@media screen and (-webkit-min-device-pixel-ratio:0) { 

#peekar button {padding:5px 9px;}
.post-meat :after {right: -7px;}

}


@media (max-width: 1180px) {
.ct-wrapper{margin:0 auto;}
#header {width: 25%;}
.main-wrapper{width:71.3%;}
.main-inner-wrap{width:73%;}
.doze li:first-child{width:46%;}
.ganed li{width:31.2%;}
blockquote:before{margin: 2% 14px 0 0;}
.bukshan{width:34%;}
.btf-thumb li{width:24% !important;}
.footer{width:31.2%;}
.post-title{font-size:22px}
#related-article ul li{width:31.9%;}
#related-article img {height: 120px;}

}

@media (max-width: 1040px) {
.main-wrapper {width: 69.4%;}
.main-inner-wrap {width: 71.8%; border:0;}
.doze li:first-child{width:44%;}
.ganed li {width: 30.8%;}
.bukshan{width:38%; margin-right:12px;}
#related-article ul li{width:31.6%;}

}


@media (max-width: 1000px) {

#header {width: 30%;}
.menu li a{padding:13px 13px;}
.main-wrapper {width:100%}
.main-inner-wrap {width: 79.9%; padding:25px 0px 0 14px;}
.sidebar-wrapper{float:left;}
.bukshan{width:34%;}
.doze li:first-child{width:46%;}
.doze li{width:47.4%;}
.ganed li {width: 31.6%;}
#related-article ul li{width:32.2%;}
.footer{width:31%;} 
.footer-credits .attribution{text-align:center;}
.deen{float:none;}

}

@media (max-width: 970px) {
.btf-thumb li{width:23.4% !important;}
#related-article ul li{width:32%;}

}


@media (max-width: 800px) {

.menu, .Pagemenu {display: none;}
.resp-desk,.resp-desk1 {display: block; margin-top:0px;}
.mainWrap {width: 768px;}
#navigation.fixed-nav{position:unset;}
nav {margin: 0; background: none;}
.main-nav{background:none; border-bottom:none;}
 .Pagemenu li a, .Pagemenu li a:hover, .Pagemenu li a.home{background:rgb(42,46,49); color:#fff; border:0; margin:0;}
.menu {width:100%; text-align:center;}
.menu li, .Pagemenu li{display: block; margin: 0;}
.menu ul li a{margin-left:25px; border:0; color:#909090;}
.menu li a{border:0; color: #909090;}
.menu li a:hover,.menu li:hover>a, .menu ul li a, .menu ul li a:hover,.menu ul li:hover>a {background:rgb(54, 59, 63); color: #909090;}
.menu ul {visibility: hidden; border-bottom:0; opacity: 0; top: 0; left: 0; padding:0; width: 100%; background:none; transform: initial;}
.menu li:hover>ul {visibility: visible; opacity: 1; position: relative; transform: initial;}
.menu ul ul {left: 0; transform: initial;}
.menu li>ul ul:hover {transform: initial;}
.with-ul::after{top:auto; margin:7px 0 0 6px; border-color: #909090 transparent transparent;}
.menu ul::after, .menu ul ul::after{border:0;}
.btf-thumb{display:none;}
.boped{float:none;}
#peekar{}
.social-ico{margin-top:-42px;}

}


@media (max-width: 800px) {

#header {width: 45%;}
.header-right {display:block; }
.ct-wrapper{ padding:0 0px;}
.main-wrapper {}
.main-inner-wrap {width: 75.4%;}
.doze li:first-child{width:44%;}
.ganed li {width: 31%;}
#related-article ul li {width: 31.8%;}
.bukshan{width: 32%;}
.footer{width:30.6%;}

}

@media (max-width: 700px) {

#header{width: 70%;}
.header-right{display:none;}
.sidebar-wrapper{}
.main-wrapper {width: 100%;}
.main-inner-wrap{padding:25px 0 0; width:100%;}
.bukshan{width: 38%;}
.footer{width:46.4%;}
#bont{width:20%;}
.fence{display:none;}
.doze li:first-child{width:45%;}
.doze li{width:47%;}
#related-article ul li{width:31.9%;}

}

@media (max-width: 600px) {

}

@media (max-width: 500px) {

.bukshan {width: 34%; height:100px; margin-right:12px;}
.doze li:first-child{width:100%; padding:0; background:none;} 
.doze li{width:100%;}
.doze li:first-child .inner-content h2 a{color:#444;}
.doze li:first-child .inner-content h2 a:hover{color:$(link.color);}
.sit{display:none;}
.footer {width: 96%;}
.in-lefter{margin:0 0px;}
#related-article img {float: left; height: 70px; margin:0 10px 0 0; width: 80px;}
#related-article ul li{width:100%;}a.related-title{text-align:left;}
.ganed li {margin: 0 8px 12px 0; width: 48%;}

}


@media (max-width: 400px) {

#header{width: 90%;}
.container{padding:0 8px;}
.bukshan {width:38%}
#peekar input{}
#carousel ul li{width:310px !important;}
.footer {width: 94%;}
.ganed li {margin: 0 0px 12px; width: 100%;}
span.categi{display:none;}

}

@media (max-width: 300px) {
#header img{width:100%;}
.sidebar-wrapper{}
.lefter{margin-left:0; margin-right:0;}
#peekar input{width:95px;}

}

@media (max-width: 260px) {
.container{padding:0 3px;}
.sidebar-wrapper{width:240px;}
#peekar{display:none;}
#carousel ul li{width:240px !important;}
.bukshan{width:100%; margin-bottom:5px;}

Answer 1

只需这样做:

@media (max-width: 500px) {
 /* .threetabs, .newsletter{
display:none; // or opacity 0, but then the space will still be taken
}*/
.sidebar-wrapper { display: none !important;}

@media (min-width: 500px) {
.sidebar-wrapper {
display:block; // or opacity 1
}

你也可以在 JS 中设置它，但这样就可以了。