通过CSS代码隐藏元素
我不知道css,似乎很难在移动版中通过我的自托管wordpress站点主题显示菜单。我们的想法是使用以下代码:通过CSS代码隐藏元素,css,wordpress,mobile,Css,Wordpress,Mobile,我不知道css,似乎很难在移动版中通过我的自托管wordpress站点主题显示菜单。我们的想法是使用以下代码: #sidebar-primary { display: none; } 虽然当我添加它时,似乎什么都没有发生。有没有办法隐藏此元素?以下是手机版本存在时的完整代码。谢谢 @media only screen and (max-width: 767px) { .wrap { max-width: 300px; } #branding { float: l
#sidebar-primary { display: none; }
虽然当我添加它时,似乎什么都没有发生。有没有办法隐藏此元素?以下是手机版本存在时的完整代码。谢谢
@media only screen and (max-width: 767px) {
.wrap { max-width: 300px; }
#branding {
float: left;
width: 100%;
position: relative;
}
#sidebar-header {
width: 100%;
margin-bottom: 10px;
}
.featured-wrapper, .aside, .content-wrap, #content, #sidebar-subsidiary .widget, #respond { width: 100%; }
.featured-post h2.entry-title a {
font-size: 12px;
line-height: 1.4em;
padding-right: 15px;
bottom: 87px;
}
.featured-post .byline {
bottom: 63px;
padding: .25em 15px .25em 1.3em;
}
.home.singular .byline { font-size: 10px; }
.menu-toggle {
display: block;
width: 100%;
}
#menu-primary {
float: left;
clear: both;
width: 100%;
margin-top: 10px;
}
#menu-primary .menu, .menu ul {
float: left;
width: 100%;
}
#menu-primary ul li {
clear: left;
display: block;
padding-left: 0;
background: none;
}
#menu-primary ul li a {
font-size: 20px;
margin-left: 0;
padding: 12px 15px;
}
#menu-primary li li a { font-size: 18px; }
#menu-primary li ul, #menu-primary li li { border: none !important; }
#menu-primary li li a:hover { background: none; }
#menu-primary ul li ul {
display: block !important;
float: left !important;
visibility: visible !important;
}
#menu-primary li ul {
display: block !important;
position: relative !important;
top: 0;
left: 30px;
}
#menu-primary ul li li ul { left: 30px !important; }
#menu-primary li:hover ul, #menu-primary li.sfHover ul {
display: block !important;
top: 0 !important;
}
#menu-primary li:first-child ul { left: 0; }
#menu-primary .sf-sub-indicator { background: none !important; }
#menu-secondary .sf-sub-indicator { background: none !important; }
.hentry {
width: 100%;
margin-right: 0;
}
.page-template-front .hentry:hover .read-more, .archive .hentry:hover .read-more, .search .hentry:hover .read-more { display: none; }
.page-template-front .hfeed-more .hentry {
float: left;
width: 100%;
margin-right: 0;
}
.comment-list li li { padding-left: 0; }
#sidebar-primary, #sidebar-secondary, #sidebar-subsidiary {
width: 100%;
clear: left;
}
#footer-content, #menu-subsidiary {
width: 100%;
margin-bottom: 20px;
}
#menu-subsidiary .menu { float: left; }
#menu-subsidiary li {
background: none;
float: none;
padding-left: 0;
margin-bottom: .4em;
}
#menu-subsidiary li a {
font-size: 10px;
line-height: 2.5em;
}
textarea { width: 96%; }
}
你试过添加吗!对你的风格重要吗
#sidebar-primary { display: none; !important}
你确定你没有错过其他的吗
@media only screen and (max-width: xyz px)
可能是
@media only screen and (max-width: 767px)
你不是在打电话
如果css中存在其他@media标记,请检查它。强制不显示元素的正确方法是使用以下css:
#sidebar-primary { display: none !important;}
分号之后!重要的
即使将显示设置为“无”,在检查dom元素时,它仍将显示。要完全删除它,您需要使用jquery或javascript在DocumentReady上的触发器来删除元素
$(document).ready(function(){
if($(window).width() < 767){
$('#sidebar-primary').remove();
}
})
希望这能有所帮助如果它不起作用,那么移动设备的样式似乎是在不同的@media query中定义的 大部分最大宽度:320px@media query用于移动设备 对于移动设备最大宽度:320px,只需检查它是否存在,并在该查询中添加样式
@media only screen
and (max-width : 320px) {
/* Styles */
}
可以找到关于@media查询的更多信息,我看不到您在css中的边栏主项中使用display none的位置。我提供了原始代码,但在那里没有使用,尽管我使用它时仍然显示。这意味着某些脚本不允许您的css。您可以在jQuery???jQuery$'id'中再次执行此操作。隐藏;边栏主{display:none!important;}试试这个。是的,我在前面添加了它:textarea{width:96%;},并且在检查元素时仍然显示