@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?
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.
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?
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!