Can you suggest me a way to reduce a little bit the size of my floating button, just for the mobile version of my website.
https://nnhotempo.it/cucina/multicooker/
Thank you

  • Jasper replied to this.
  • 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;
        }
    }

    Hi gamma42 , in what way do you like to make the button bigger? The icon size or the width and the height of the button?

    The width and the height of the button. I want to make it 30% smaller than now.

      Hi gamma42 ,

      You can use this custom CSS to change the width and height of the buttons:

      /* 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;
      }

      Simply copy and paste this into your site's Additional CSS and customize it to your liking! 😄

      Let us know if you have any questions!

      Awesome, thank you James!
      Can you suggest me a css code just for the mobile version of my website?
      The button size is fine for tablet and desktop view.

        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;
                }
            }