Making SVG image responsive with media queries - css

Question

I have an SVG Image that I am using on my website. However, I want it so that when the browser width is less than 292px, the SVG image will resize to become smaller.
This is the current code I have on my SVG.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 141 141">
<defs>
<style type="text/css">
.cls-2 {
fill: #fff;
}
#smaller {
height="15";
width="15";
}
#media screen and (max-width: 292px) {
#smaller {
display: block;
}
}
</style>
</defs>
<path d="M70.500,-0.003 C31.562,-0.003 -0.003,31.562 -0.003,70.500 C- 0.003,109.437 31.562,141.002 70.500,141.002 C109.437,141.002 141.002,109.437 141.002,70.500 C141.002,31.562 109.437,-0.003 70.500,-0.003 ZM99.628,83.851 C99.628,83.851 81.325,64.143 81.325,64.143 C81.325,64.143 81.325,118.311 81.325,118.311 C81.325,118.311 59.675,118.311 59.675,118.311 C59.675,118.311 59.675,64.137 59.675,64.137 C59.675,64.137 41.367,83.851 41.367,83.851 C41.367,83.851 24.432,72.287 24.432,72.287 C24.432,72.287 56.661,37.585 56.661,37.585 C56.661,37.585 70.498,22.688 70.498,22.688 C70.498,22.688 84.335,37.585 84.335,37.585 C84.335,37.585 116.567,72.287 116.567,72.287 C116.567,72.287 99.628,83.851 99.628,83.851 Z" id="path-1" class="cls-2" fill-rule="evenodd"/>
</svg>
However, this code does not seem to be working. What can I do to make it smaller with media queries?

Answer 1

Your CSS syntax is not correct, but if you want your image to scale down it would look something like this:
#smaller {
height: 15px;
width: 15px;
}
#media screen and (max-width: 292px) {
#smaller {
height: 10px;
width: 10px;
}
}