Title: Responsive button font size
Last modified: April 11, 2017

---

# Responsive button font size

 *  Resolved [michaeldan](https://wordpress.org/support/users/michaeldan/)
 * (@michaeldan)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/responsive-button-font-size/)
 * Hello,
 * I am trying to change the font size of a button so that it will display better
   on mobile version. I am using a media query to accomplish this but it looks like
   the font-size is locked at 30px (which is what was selected when creating the
   button). Inspecting page elements shows this:
 * .wpi_designer_button_1472 {
    font-family: Arial !important; **font-size: 30px!
   important;** font-weight: 100 !important; border-width: 3px !important; border-
   style: solid !important; padding: 10px 20px !important;
 * which is why I am having trouble overriding the font-size in custom css even 
   when including !important as seen here:
 * .wpi_designer_button_1472 {
    font-size: 10px !important; }
 * Is there a way to override the plugin’s css code or am I completely missing something?
 * Thank you much!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [WooPrali](https://wordpress.org/support/users/wooprali/)
 * (@wooprali)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/responsive-button-font-size/#post-9023152)
 * Hi,
 * It should work when you are adding !important.
 * Better to change font size in button style settings.
 * Regards,
 * Prali
 *  Thread Starter [michaeldan](https://wordpress.org/support/users/michaeldan/)
 * (@michaeldan)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/responsive-button-font-size/#post-9023892)
 * 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](https://wordpress.org/support/users/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/](http://elitevirtualsecurity.com/test-page-no-sidebar/)
 *  Plugin Author [WooPrali](https://wordpress.org/support/users/wooprali/)
 * (@wooprali)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/responsive-button-font-size/#post-9024446)
 * Hi,
 * Just now i saw your website.
 * Actually the problem is in css file autoptomize enqueue.
 * Best way to solve this is excluding the custom css file from autoptomize.
 * Please check “How does “exclude from optimizing” work?” in faq section of autoptomize
   plugin page “[https://wordpress.org/plugins/autoptimize/&#8221](https://wordpress.org/plugins/autoptimize/&#8221);.
 * Still if you face issue.
 * I will try to add custom css feature in designer button plugin.
 * Regards,
 * PRALI
 *  Thread Starter [michaeldan](https://wordpress.org/support/users/michaeldan/)
 * (@michaeldan)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/responsive-button-font-size/#post-9024664)
 * That was it! Thank you for going above and beyond to help resolve my issue!
 *  Plugin Author [WooPrali](https://wordpress.org/support/users/wooprali/)
 * (@wooprali)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/responsive-button-font-size/#post-9024786)
 * Thank you for using Designer Button Plugin.
 * Regards,
 * PRALI

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Responsive button font size’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wpi-designer-button-shortcode_413a0e.
   svg)
 * [WPi Designer Button](https://wordpress.org/plugins/wpi-designer-button-shortcode/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wpi-designer-button-shortcode/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wpi-designer-button-shortcode/)
 * [Active Topics](https://wordpress.org/support/plugin/wpi-designer-button-shortcode/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wpi-designer-button-shortcode/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wpi-designer-button-shortcode/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [WooPrali](https://wordpress.org/support/users/wooprali/)
 * Last activity: [9 years, 2 months ago](https://wordpress.org/support/topic/responsive-button-font-size/#post-9024786)
 * Status: resolved