If your sharing buttons don't look great on mobile devices because of the smaller screen size, you can use CSS to hide them on mobile devices/smaller screens. This can sometimes happen, especially with the floating buttons.

The fix is pretty easy: all you need is one CSS media query!

Simply copy and paste into your CSS. You can change 600px to the MAXIMUM width where you want the buttons hidden. So, this example will hide your sharing buttons at all screen widths up to 600px.


For floating buttons

@media only screen 
and (max-width : 600px) { /* change 600px if necessary */
  .share-buttons-tab { display: none !important; }
}


For standard buttons

@media only screen 
and (max-width : 600px) { /* change 600px if necessary */
  .share-buttons-panel { display: none !important; }
}

​Bonus

If you still want to include some sharing buttons for smaller screen sizes, you can have 2 sets of sharing buttons, one for mobile devices and one for desktops. Here's an example of the CSS you'll need to show floating buttons on desktops and a standard AddShoppers button set:

@media only screen 
and (max-width : 600px) { /* change 600px if necessary */
  .share-buttons-tab { display: none !important; }
}
@media only screen 
and (min-width : 600px) { /* change 600px if necessary */
  .share-buttons-panel { display: none !important; }
}
Did this answer your question?