Change max-width of a media query programmatically (Javascript/jQuery)

Question

@media only screen and (max-device-width: 667px), screen and (max-width: 552px) {
    .class1 {

    }

    .class2 {

    }

    .class3 {

    }

    .class4 {

    }

    .class5 {

    }
}

I have the above strucutre in my css file. What I'm trying to implement is that I have a button. When I click on that button, I need to change the max-width: 552px to max-width: 1000px. Is that possible?

What you can really do is toggle a class. Factor out those rules and namespace them under a separate class you can use for this. — Oluwafemi Sule, Nov 08 '17 at 03:46
You could use multiple style sheets and switch between them. — david25272, Nov 08 '17 at 03:49
Search your question more here on Stack. I found this. https://stackoverflow.com/a/39611257/8878472 — Luke King, Nov 08 '17 at 04:07

score 0 · Answer 1 · answered Nov 08 '17 at 04:05

0

You mean, after click the button you device screen is change? into 1000px ? if not..

You can change the attribute 552px to 1000px, but this is depent on your screen device.

answered Nov 08 '17 at 04:05

Ancelmus Simamora

21
2

Yes. Once I click the button, the value should change to 1000px – Vivek Malhotra Nov 08 '17 at 04:08
----------- Demo like this? – Ancelmus Simamora Nov 08 '17 at 04:17

score 0 · Answer 2 · answered Nov 08 '17 at 04:20

a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 500px;
  height: 100px;
}

<a id="btn" href="#btn">Demo</a>

Hi Viviek.. This is help you?

score 0 · Answer 3 · answered Nov 08 '17 at 04:52

thanks for all your answers. However, I figured out another way to do this. I did the below to achieve the result.

For size = 552px

@media only screen and (max-device-width: 667px), screen and (max-width: 552px) {
    .class1 {

    }

    .class2 {

    }

    .class3 {

    }

    .class4 {

    }

    .class5 {

    }
}

For size = 1000px

@media only screen and (max-device-width: 667px), screen and (max-width: 1000px) {
    full-screen .class1 {

    }

    full-screen .class2 {

    }

    full-screen .class3 {

    }

    full-screen .class4 {

    }

    full-screen .class5 {

    }
}

Now, whenever I click the button, I just need to call the below code. $("body").addClass("full-screen")

Done!

Change max-width of a media query programmatically (Javascript/jQuery)

3 Answers3