How to edit a form's CSS for mobile devices

We are using the “Floating Box” form on our website. A number of site visitors have contacted us complaining that the form covers the entire screen on their mobile device.

I was able to identify the problematic CSS in the form’s default CSS code.

However, this code is called in based on an @media rule.

I tried to use the “CSS Selector” tool in ActiveCampaign’s form designer, but it only seems to work on the desktop dimensions for the form. I cannot select the form’s CSS that’s used on tablets (for example).

Is there a way to edit a form’s CSS so I can adjust how it appears on mobile devices and not just on desktop?

Thanks!

Not beyond the CSS Selector.

Did you try using the “!important” declaration after your CSS statements?

I have the same issue here.

The floating box is clean on desktop, but cover the full screen on mobile.

Please can you give us a CSS statements example that is working for phone + tablet ?

Or propose a CSS statement to make the floating box disappear for mobile + tablet ?