gamma42 ,

This should make it only work on mobile devices:

/* MOBILE ONLY */
@media screen and (max-width: 769px){
  /* MAIN BUTTON */
  .buttonizer .buttonizer-button.buttonizer-head {
	  width: 56px !important;
	  height: 56px !important;
  }

  /* SUB BUTTONS */
  .buttonizer .buttonizer-button-list .buttonizer-button {
	  width: 40px !important;
	  height: 40px !important;
  }
}

Let me know if it worked for you!

gamma42 ,

I took a look at your site and saw your mobile only CSS code has the same width and height as the desktop version.

Mobile only CSS code:

Desktop only CSS code:

If you reduce the width and height of the mobile only CSS code, you should see it change. 😁

P.S. I noticed that your site also has a caching plugin, could you try clearing your cache?

5 days later

Can you check now? I cleared the cache but I still don't see any change in width and height.

    gamma42 ,

    Can you send us a screenshot of your CSS?
    We might be able to something that's making it not work.

    5 days later

    Hi gamma42 ,

    Thanks for the reminder!

    Here's an updated version of the CSS:

    @media screen and (max-width: 769px) {
        .buttonizer .buttonizer-button.button-mobile-1.button-desktop-1 {
            width: 20px !important;
            height: 20px !important
        }
    }

    Please let me know if this works for you!

    Yes, it works! This css code resizes only the circle. How can I resize also the icon inside the circle?

      gamma42 ,

      This should resize the image in your button:

      @media screen and (max-width: 769px) {
          .buttonizer .buttonizer-button.button-mobile-1.button-desktop-1 {
              width: 50px !important;
              height: 50px !important
          }
          
          /* Icon image */
          .buttonizer .buttonizer-button.button-mobile-1.button-desktop-1 img {
              width: 35px !important;
          }
      }