Develop Reference

determining DOM element media style using JS

I want to know the display CSS of a DOM element. Normally I would using something like document.getElementById('hello-world').style.display but when the style is being set using CSS #media Rule I do not see any change to this value.
Any reason why?
And how would I be able to get this information.
Here is an example to demonstrate https://codepen.io/liywjl/pen/JjYyqVv
Code:
HTML
<p id="hello-world">Hello world</p>
CSS
#media (min-width: 980px) {
#hello-world {
display: none;
}
}
JS
window.addEventListener('resize', function(){
console.log(document.getElementById('hello-world').style.display)
})

You can use
window.getComputedStyle(document.getElementById('hello-world')).display
However, then can be a delay between the the setting of the style and the page re-flow and this may be not work on all browsers.

How to get media queries to work with style added by a toggle function

I have a mobile-menu which is toggled by js code when user clicks the mobile-menu-icon.
The problem I have is: when re-sizing screen from mobile view to large view, the menu is still open.
I used media query to hide the mobile-menu for large screens, but it seems the toggle method added display:block on the element and the media query cannot override that.
What's your approach to fix this problem?

Instead of using .toggle, use .toggleClass("hidden"). Then you can use CSS
.hidden {
display: none;
}
When the class is removed, it will get whatever styling is default for the media type.

#media only screen and (min-width: 768px) {
.mobile-menu { display: none !important; }
}

Try overriding the same by adding !important to display:none in media query for large screens

Or use a resize script like this:
$(window).resize(function () {
if ($(window).width() > 641) {
$(".mobile-menu").hide();
}
else {
}
})

remove third-level navigation wordpress

We're using a theme that has responsive navigation... but it's pretty bad on the third-level. I'd like to remove that level completely on devices less that 768px wide.
Does anyone have an idea of how to do this? All of the navigation elements seem to be converting to <option>... is there a way to tell it to only do this to top- and second-level navigation?
http://www.torontofamilytherapist.com/
Thank ya!

#media screen and (max-width: 767px) {
.sub-menu .sub-menu {
display: none
}
}
Should do it. You could also add that selector and declaration to a similar media query if you have one already.

Issue with div display, css #media vs javascript

For my first responsive design I use css #media with display: none; or display:table-cell to show or hide sidebars. This works fine, I need the display:table-cell for a three divs layout.
CSS example:
#div_right { display: table-cell; }
#media screen and (max-width: 700px) { #div_right {display: none; } }
JS is standard ToogleDisplay function (with e.style.display = "table-cell"; in place of e.style.display = "block"; )
On small windows/screen the sidebars are hidden, but a new div with 2 options to display these 2 same navigation sidebars appears: clicking on a link with embedded javascript, allows to toogle display of a sidebar div. It also works fine.
The problem comes when I show then hide the sidebars by clicking on the JS links (on small windows), and then resize the window to a larger width: the sidebars are not displayed this time!
Is there a #media condition to specify "on larger width than xxx" do force display:table-cell; ?
I don't want to use jQuery, and a solution with CSS would be nice.

Just use min-width instead of max-width:
#div_right { display: table-cell; }
#media screen and (min-width: xxx) { #div_right {display: none; } }
Very simple, tells the browser that these rules are to be used if the browser is larger then xxx.
If you want to know everything about #media queries, check out the Mozilla Docs On It.
Could be very helpful to you.
To see it in action, see this JSFiddle
[EDIT]
As noted in the other answer, if you are using jquery, it will override the #media rule.
The correct way to do this, not using !important is to use jquery:
In your js:
$(".menu").show().css("display","block");
This JS shows it as display:block;

Are you using jquery to $.('el').css("display","none") or .hide() the elements? If so jquery will add the style as an inline-style - hence overwriting your media query.
You can try to add !important to your CSS code (the media query) and it might work.
See: http://www.iandevlin.com/blog/2013/05/css/using-important-in-your-media-queries
Also please note the follow rule of thumb:
CSS style is applied in the following hierachy/priority:
!important is always highest priority
The closer styles to your elements will override styles defined before:
inline styles are higher priority
CSS styles are lowest priority
Please check: developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm
Also you might want to use not only min-width, but rather a range like:
#media screen (min-width: xxx) and (max-width: yyy){ }
Check out some standard templates from: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Make div disappear when reducing window width?

How do you make a div disappear when reducing window width, leaving it's complete space available to other elements? I do not mean hiding piece by piece on overflow, but the whole element.
I came across this brilliant feature on the following URL:
http://flexslider.woothemes.com
Is javascript required or can it be done with CSS? I noticed the page is pretty much HTML5.

You can do this with just CSS:
#media all and (max-width: 480px) {
.mydiv { display: none; }
}