Edit Media queries CSS with event listener

Question

I have an unordered list <ul> that I would like to add an event listener too if it fits a certain media query.

The original css :

        @media (max-width: 414px) {
          transition: all 3s ease-out;
          height: 0px;
          display: none;
        }

the eventlistener function :

    if(window.matchMedia("max-width: 414px")) {
      console.log(list.style.height);
      console.log(list.style.display);
      list.style.height = 'auto'
      list.style.display = 'unset'
    }

HELP : the transition seems not to be working & the console log for list.style.height & list.style.display is both empty ''

Your @media rule doesn't have a style rule inside it. Where are those style declarations going? — BoltClock
– BoltClock, Commented Sep 25, 2017 at 8:48

Ori Drori · Accepted Answer · 2017-09-25 08:53:38Z

2

The transition won't work because you are changing display from/to none. In addition, you need to transition the height between numeric values (auto doesn't count).

CSS:

@media (max-width: 414px) {
    transition: all 3s ease-out;
    height: 0;
}

JS:

if (window.matchMedia("(min-width: 414px)").matches) {
  list.style.height = list.style.height + 'px'; // set the exact height
}

edited Sep 25, 2017 at 8:53

answered Sep 25, 2017 at 8:21

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

You missed the fact that the max-width: 414px expression must be in parentheses, and that the matchMedia() function returns an MQL which contains a .matches property which should be the one tested in the condition, as Shadow Fiend pointed out.

DarkArtistry Over a year ago

hi thanks ! i fixed it with your help on the display part ! yeah it doesnt work with transition and transform, "display". But after making my <ul> to be able to make transformation in scale, the li inside it do not transform the same way ... hmmm .. ul appears by sliging down, li just fly in

Shadow Fiend · Accepted Answer · 2017-09-25 08:45:03Z

2

Its not working and your console is empty because of this line

if(window.matchMedia("max-width: 414px")) {

It must be

 if (window.matchMedia("(max-width: 414px)").matches) {

And transition is not working with display:none and height:auto..

You can try opacity instead of display.

I made a sample fiddle..

And try to look at the console you can see that its not empty anymore.

answered Sep 25, 2017 at 8:45

Shadow Fiend

1,8291 gold badge11 silver badges14 bronze badges

Collectives™ on Stack Overflow

Edit Media queries CSS with event listener

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related