Resize button

gamma42

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

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?

gamma42

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

James

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!

gamma42

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.

James

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

Sorry but it didn't work. I don't know why. This is a page example: https://nnhotempo.it/casa/scopa-elettrica/rowenta-powerline-extreme-cyclonic/

James

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?

gamma42

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

James

gamma42 ,

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

gamma42

here the screenshot https://imgur.com/4FE4RCm

gamma42

Hi James, any news?

James

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!

gamma42

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

James

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

gamma42

Great 😃 it works!

James

gamma42 ,

Glad to hear that it worked! 🥳