Changing media query

Question

I'm attempting to set a media query for this script with no luck. Can anyone point me in the right direction? Basically, I would like the .style.width = 50% to be 100% on small screen sizes. :/

function openNav() {
  document.getElementById("mySidenav").style.width = "50%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Sounds like a CSS issue, not a javascript one. I'd consider creating a class, with a media query override, then you can add/remove that class — freefaller, Oct 21 '19 at 13:22
you need to provide more detail about the issue, also you need to provide your HTML so people may know if your HTML is actually talking to your HTML — Zeeshan Adil, Oct 21 '19 at 13:27

score 0 · Answer 1 · answered Oct 21 '19 at 13:47

function openNav() {
  if (window.innerWidth < your_width)
    document.getElementById("mySidenav").style.width = "100%";
  else
    document.getElementById("mySidenav").style.width = "50%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

For example... But I would use CSS

Changing media query

1 Answers1