Responsive button font size

Thank you for the prompt reply. I can see you provide exceptional support for your plugin!

Let me rephrase my issue…

I did set the font size within the button style settings where I want it for desktop display (30px), but on smaller displays (i.e. mobile version) it does not scale down with the rest of the page. It remains at 30px, which makes the button too big to be usable.

Therefore I have added a media query to my custom css to reduce the font size and have included !important:

@media screen and (max-width: 760px) {
.wpi_designer_button_1472 {
font-size: 10px !important;
}

However, it will not override the elements produced by the shortcode, which also use !important:

.wpi_designer_button_1472 {
font-family: Arial !important;
font-size: 30px !important;
…

When removing the !important rule from the original class generated by the plugin (.wpi_designer_button_1472), my font resizing works. But I only know how to remove that rule via the “inspect element” tool in my browser for testing purposes.

Basically, my custom css will not override the button style settings. Is this an enqueuing issue on my end or something else? I am still learning css so it’s quite possible that I have a limited understanding of how the plugin code is actually generated and how to properly modify it, or that I am overlooking an easy solution.

I do appreciate your help pointing me in the right direction!

Here is a link to the page if it helps:

http://elitevirtualsecurity.com/test-page-no-sidebar/

That was it! Thank you for going above and beyond to help resolve my issue!