Media queries ignored when element has style on it
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a sidebar that slides from 0px to 160px from the left when I press a button.
That is done with this javascript code, I wanted to add css queries to make my website responsive but that just broke the sliding sidebar
function MenuButton() {
var x = window.matchMedia("(min-width: 1281px)");
var min = "0px";
var max = "160px";
if(x.matches)
{
min = "50px";
max = "160px";
}
if (document.getElementById("mySidenav").style.width == max) {
document.getElementById("mySidenav").style.width = min;
} else {
document.getElementById("mySidenav").style.width = max;
}
}
This is the css query i am using
@media (min-width: 1281px) {
}
When the button is pressed it adds style="width: 0px;" to my code, ignoring the media query when i want to resize the window. I use a css class for my style and that class is responsive.
How can i make this work?
Here is an example of the issue i'm having, you can try resizing the window but once the button is clicked the responsive design is gone
javascript html css
asked Nov 26 '18 at 20:58
SenaCarbtcSenaCarbtc
5411
|
show 5 more comments
I have a sidebar that slides from 0px to 160px from the left when I press a button.
That is done with this javascript code, I wanted to add css queries to make my website responsive but that just broke the sliding sidebar
function MenuButton() {
var x = window.matchMedia("(min-width: 1281px)");
var min = "0px";
var max = "160px";
if(x.matches)
{
min = "50px";
max = "160px";
}
if (document.getElementById("mySidenav").style.width == max) {
document.getElementById("mySidenav").style.width = min;
} else {
document.getElementById("mySidenav").style.width = max;
}
}
This is the css query i am using
@media (min-width: 1281px) {
}
When the button is pressed it adds style="width: 0px;" to my code, ignoring the media query when i want to resize the window. I use a css class for my style and that class is responsive.
How can i make this work?
Here is an example of the issue i'm having, you can try resizing the window but once the button is clicked the responsive design is gone
javascript html css
asked Nov 26 '18 at 20:58
SenaCarbtcSenaCarbtc
5411
I would say thatx.matchesdoesn't evaluate totruesominis0px
– Ryan Wilson
Nov 26 '18 at 21:00
@RyanWilson it works, i've tested it. The sidebar is responsive until i press the button andstyle="width: 0px";is added to the html. That's where the website breaks. When that line is added the button still works but the responsiveness is gone
– SenaCarbtc
Nov 26 '18 at 21:02
I don't see how it works if it is setting thewidthto0px, which is the default value ofmin.
– Ryan Wilson
Nov 26 '18 at 21:05
@RyanWilson I'm sorry, my mistake. The start width of the sidebar is 160, so when the button is pressed it gets to 0 and if its pressed again its 160 again, it works perfectly.
– SenaCarbtc
Nov 26 '18 at 21:07
1
@SenaCarbtc can you give us your html/css codes?
– V.Le
Nov 26 '18 at 21:12
|
show 5 more comments
I have a sidebar that slides from 0px to 160px from the left when I press a button.
That is done with this javascript code, I wanted to add css queries to make my website responsive but that just broke the sliding sidebar
function MenuButton() {
var x = window.matchMedia("(min-width: 1281px)");
var min = "0px";
var max = "160px";
if(x.matches)
{
min = "50px";
max = "160px";
}
if (document.getElementById("mySidenav").style.width == max) {
document.getElementById("mySidenav").style.width = min;
} else {
document.getElementById("mySidenav").style.width = max;
}
}
This is the css query i am using
@media (min-width: 1281px) {
}
When the button is pressed it adds style="width: 0px;" to my code, ignoring the media query when i want to resize the window. I use a css class for my style and that class is responsive.
How can i make this work?
Here is an example of the issue i'm having, you can try resizing the window but once the button is clicked the responsive design is gone
javascript html css
asked Nov 26 '18 at 20:58
SenaCarbtcSenaCarbtc
5411
I have a sidebar that slides from 0px to 160px from the left when I press a button.
That is done with this javascript code, I wanted to add css queries to make my website responsive but that just broke the sliding sidebar
function MenuButton() {
var x = window.matchMedia("(min-width: 1281px)");
var min = "0px";
var max = "160px";
if(x.matches)
{
min = "50px";
max = "160px";
}
if (document.getElementById("mySidenav").style.width == max) {
document.getElementById("mySidenav").style.width = min;
} else {
document.getElementById("mySidenav").style.width = max;
}
}
This is the css query i am using
@media (min-width: 1281px) {
}
When the button is pressed it adds style="width: 0px;" to my code, ignoring the media query when i want to resize the window. I use a css class for my style and that class is responsive.
How can i make this work?
Here is an example of the issue i'm having, you can try resizing the window but once the button is clicked the responsive design is gone
javascript html css
javascript html css
asked Nov 26 '18 at 20:58
SenaCarbtcSenaCarbtc
5411
asked Nov 26 '18 at 20:58
SenaCarbtcSenaCarbtc
5411
edited Nov 26 '18 at 21:33
SenaCarbtc
asked Nov 26 '18 at 20:58
SenaCarbtcSenaCarbtc
5411
asked Nov 26 '18 at 20:58
SenaCarbtcSenaCarbtc
5411
asked Nov 26 '18 at 20:58
SenaCarbtcSenaCarbtc
5411
5411
I would say thatx.matchesdoesn't evaluate totruesominis0px
– Ryan Wilson
Nov 26 '18 at 21:00
@RyanWilson it works, i've tested it. The sidebar is responsive until i press the button andstyle="width: 0px";is added to the html. That's where the website breaks. When that line is added the button still works but the responsiveness is gone
– SenaCarbtc
Nov 26 '18 at 21:02
I don't see how it works if it is setting thewidthto0px, which is the default value ofmin.
– Ryan Wilson
Nov 26 '18 at 21:05
@RyanWilson I'm sorry, my mistake. The start width of the sidebar is 160, so when the button is pressed it gets to 0 and if its pressed again its 160 again, it works perfectly.
– SenaCarbtc
Nov 26 '18 at 21:07
1
@SenaCarbtc can you give us your html/css codes?
– V.Le
Nov 26 '18 at 21:12
|
show 5 more comments
I would say thatx.matchesdoesn't evaluate totruesominis0px
– Ryan Wilson
Nov 26 '18 at 21:00
@RyanWilson it works, i've tested it. The sidebar is responsive until i press the button andstyle="width: 0px";is added to the html. That's where the website breaks. When that line is added the button still works but the responsiveness is gone
– SenaCarbtc
Nov 26 '18 at 21:02
I don't see how it works if it is setting thewidthto0px, which is the default value ofmin.
– Ryan Wilson
Nov 26 '18 at 21:05
@RyanWilson I'm sorry, my mistake. The start width of the sidebar is 160, so when the button is pressed it gets to 0 and if its pressed again its 160 again, it works perfectly.
– SenaCarbtc
Nov 26 '18 at 21:07
1
@SenaCarbtc can you give us your html/css codes?
– V.Le
Nov 26 '18 at 21:12
I would say that
x.matches doesn't evaluate to true so min is 0px– Ryan Wilson
Nov 26 '18 at 21:00
I would say that
x.matches doesn't evaluate to true so min is 0px– Ryan Wilson
Nov 26 '18 at 21:00
@RyanWilson it works, i've tested it. The sidebar is responsive until i press the button and
style="width: 0px"; is added to the html. That's where the website breaks. When that line is added the button still works but the responsiveness is gone– SenaCarbtc
Nov 26 '18 at 21:02
@RyanWilson it works, i've tested it. The sidebar is responsive until i press the button and
style="width: 0px"; is added to the html. That's where the website breaks. When that line is added the button still works but the responsiveness is gone– SenaCarbtc
Nov 26 '18 at 21:02
I don't see how it works if it is setting the
width to 0px, which is the default value of min.– Ryan Wilson
Nov 26 '18 at 21:05
I don't see how it works if it is setting the
width to 0px, which is the default value of min.– Ryan Wilson
Nov 26 '18 at 21:05
@RyanWilson I'm sorry, my mistake. The start width of the sidebar is 160, so when the button is pressed it gets to 0 and if its pressed again its 160 again, it works perfectly.
– SenaCarbtc
Nov 26 '18 at 21:07
@RyanWilson I'm sorry, my mistake. The start width of the sidebar is 160, so when the button is pressed it gets to 0 and if its pressed again its 160 again, it works perfectly.
– SenaCarbtc
Nov 26 '18 at 21:07
1
1
@SenaCarbtc can you give us your html/css codes?
– V.Le
Nov 26 '18 at 21:12
@SenaCarbtc can you give us your html/css codes?
– V.Le
Nov 26 '18 at 21:12
|
show 5 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53488964%2fmedia-queries-ignored-when-element-has-style-on-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53488964%2fmedia-queries-ignored-when-element-has-style-on-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I would say that
x.matchesdoesn't evaluate totruesominis0px– Ryan Wilson
Nov 26 '18 at 21:00
@RyanWilson it works, i've tested it. The sidebar is responsive until i press the button and
style="width: 0px";is added to the html. That's where the website breaks. When that line is added the button still works but the responsiveness is gone– SenaCarbtc
Nov 26 '18 at 21:02
I don't see how it works if it is setting the
widthto0px, which is the default value ofmin.– Ryan Wilson
Nov 26 '18 at 21:05
@RyanWilson I'm sorry, my mistake. The start width of the sidebar is 160, so when the button is pressed it gets to 0 and if its pressed again its 160 again, it works perfectly.
– SenaCarbtc
Nov 26 '18 at 21:07
1
@SenaCarbtc can you give us your html/css codes?
– V.Le
Nov 26 '18 at 21:12