I am currently utilizing colorbox for a popup that appears when the page loads, and it is set to specific width and height using inline CSS within the script. However, I am facing a challenge in adjusting the dimensions for smaller screens through media queries as I am unsure how to access the code from my CSS file. Despite attempting to add an ID and a class where the width and height properties are defined, my efforts have been unsuccessful due to my limited understanding of this issue. Below is the snippet of code displaying the inline CSS being used. My goal is to transfer this styling information to my CSS document:
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"600px", height:"450px", href: "popup.html"});
}
setTimeout(openColorBox, 5000);
</script>