Resize button

gamma42 · 2020-01-17T16:00:14+00:00

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/multic...

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! 🥳