Hide an element through CSS code - css

Question

I do not know css and it seems hard to display a menu through my self-hosted wordpress site theme in the mobile version. The idea is to use the following code:
#sidebar-primary { display: none; }
Though seems that nothing happens when I add it. Is there a way to hide this element? Below is th whole code when the mobile version is present. Thanks
#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%; }
}

Answer 1

If it is not working then it looks like the style for mobile devices are defined in different #media query
Mostly max-width : 320px #media query is used for mobile devices
For mobile devices max-width : 320px just check if it is there and add styles in that query
#media only screen
and (max-width : 320px) {
/* Styles */
}
and more information on #media queries can be found here and here

Answer 2

Did you try adding !important to your style?
#sidebar-primary { display: none; !important}

Answer 3

Are you sure that you have not missed any other
#media only screen and (max-width: xyz px)
May be
#media only screen and (max-width: 767px)
style are not calling.
Check with other #media tag if exists in css.

Answer 4

The right way to force the element to not be displayed is to use the css below:
#sidebar-primary { display: none !important;}
semi-colon after !important
Even if you set the display to none it will still appear when you inspect the dom element. To remove it entirely you need to use jquery or javascript the triggers on document ready that removes the element.
$(document).ready(function(){
if($(window).width() < 767){
$('#sidebar-primary').remove();
}
})
Hope this helps