Making css-doodle responsive with media queries - html

Question

I've set up a background for my page using css-doodle. It looks fine when on full screen but because of the way my grid is set up, the shapes get smaller along with the screen and are completely invisible on split screen or when simulating mobile devices. I would like them to visually always be the same size.
Here's a media query that I tried adding but it doesn't seem to do anything. (I'm fairly new to RWD so I'm not sure what the issue is.)
#media only screen and (max-width: 600px) {
.doodle {
grid: 22 / 100vmax;
grid-gap: 20px;
}
}
And here's my CSS-Doodle code.
<css-doodle grid="5" class="doodle">
:doodle {
#grid: 50 / 100vmax;
grid-gap: 30px;
}
background: white;
opacity: #r(-1, .08);
clip-path: polygon(51% 26%, 0% 100%, 100% 100%);
</css-doodle>

Answer 1

Using the example of the docs, I tried using em units instead of vmax. Codepen Demo
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(to bottom, rgb(8, 36, 83), rgb(2, 91, 137));
}
.doodle {
position: fixed;
z-index: -1;
animation: spin 200s infinite;
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#media only screen and (max-width: 600px) {
.doodle {
#grid: 25 / 100em;
grid-gap: 20px;
}
}
<css-doodle grid="5" class="doodle">
:doodle {
#grid: 50/100em;
grid-gap: 30px;
}
background: white;
opacity: #r(-1, .08);
clip-path: polygon(51% 26%, 0% 100%, 100% 100%);
animation: flow #r(10s, 50s) infinite linear;
#keyframes flow {
0%, 100%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
50% {
-webkit-transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
}
}
</css-doodle>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.1/css-doodle.js"></script>