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;
    }
}
                            Buttonizer Home Pricing Features Knowledgebase GDPR Compliance Get Buttonized