wordpress - Hide an element through CSS code -

wordpress - Hide an element through CSS code -

i not know css , seems hard display menu through self-hosted wordpress site theme in mobile version. thought utilize next code:

#sidebar-primary { display: none; }

though seems nil happens when add together it. there way hide element? below th whole code when mobile version present. thanks

@media screen , (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 { 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 { font-size: 20px; margin-left: 0; padding: 12px 15px; } #menu-primary li li { 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 { font-size: 10px; line-height: 2.5em; } textarea { width: 96%; } }

if not working looks style mobile devices defined in different @media query

mostly max-width : 320px @media query used mobile devices

for mobile devices max-width : 320px check if there , add together styles in query

@media screen , (max-width : 320px) { /* styles */ }

and more info on @media queries can found here , here

css wordpress mobile