Adjusting Easy Fancybox using @media

I’m 99% finished on my first wordpress site… woohoo!

The problem I’m having is auto adjusting the width of Easy Fancybox (with an embedded Mail Chimp form) using @media. I can get the mc form to adjust based on screen size, but not fancybox. I’ve tried searching for solutions but coming up short.

The problem is on the homepage of https://brittneyanneproperties.com/

You can see the problem if you resize the browser width to < 480 pixels.
The fancybox remains large but the form reduces in width. This will become a problem in smaller devices when the screen is rotated to horizontal and the width increases. The form increases in size but the fancybox remains in the narrow width. Refreshing the page corrects fancybox with the new resolution but I want it to update automatically.

The html on the home page explicity sets the width to 350. I’m using Simple Custom CSS to override the width with @media:

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop" class="hentry" style="width:350px;height:280px;">
        [mc4wp_form]
    </div>
</div>

@media screen and (max-width: 480px) {
  #contact_form_pop {
    width:200px!important;
    height:280px;
  }
}

Thanks for any help you can offer