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
Resize 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!
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/
- Edited
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.
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?
Can you check now? I cleared the cache but I still don't see any change in width and height.
here the screenshot https://imgur.com/4FE4RCm
Hi James, any news?
Yes, it works! This css code resizes only the circle. How can I resize also the icon inside the circle?
- Best Answerset by 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;
}
}
Great it works!