How do is set device specific viewport widths when i am unable to use css to do so?

Question

I am using 360 product rotation on my website and I want to have the rotation as 50% of the browser and then 100% when below 1000px. However I am unable to use media queries as the styling/rules are used in the HTMl. Like so;

<div id="Frame" style="width:100vw;  margin:auto; background-repeat:no-repeat; background-position:center;"></div>

<script type="text/javascript">                 
    $('#Frame').animate360({
         centerInWindow:false, 
         xmlPath: './360-light-1/', 
         objPath: './360-light-1/Images/',
         iconPath: './360-light-1/HTML5/Images/'
    });
</script> 

I have tried using the #Frame tag in the css but it has not worked. Is there any way I can set break points within the html?

Answer 1

You can use @media queries.

Include the following script at the bottom of your page:

<script>

function initialiseFrame() {
var frame = document.getElementById('frame');
frame.removeAttribute('style');
}

window.addEventListener('load',initialiseFrame,false);

</script>

This will remove the inline styles from #frame, so that any @media query styles are not subsequently overwritten.