Adding CSS media queries with javascript or jQuery

Question

I'm having some issues trying to add media queries with jQuery/javascript. I have a <div class="container"> hidden on small screens with display: none. I want to use the code below to make it show up, although I don't get any errors nothing changes.

$('.container').append('<style type="text/css">@media screen and (min-width: 1012px){ .container { "display": "block"}}</style>');

Any suggestions? Thank you.

Answer 1

It's will work fine if you only delete double quotes form "display": "block"

$('.container').append('<style type="text/css">@media screen and (max-width: 1012px){ .container { display: block}}</style>');

but I think better if you change your selector

$('head').append('<style type="text/css">@media screen and (max-width: 1012px){ .container { display: block}}</style>');

Answer 2

You can use

document.querySelector('style').textContent +=
"@media screen and (min-width: 1012px){ .container { display: 'block'}}"

Get style element and add your new rules, and your html add if no exists

<style>......</style>