AddShoppers Help Desk

Support Center

How to Remove Sharing Buttons on Mobile

Last Updated: Feb 07, 2014 06:14PM EST

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

Contact Us

  • Please use the floating chat bubble in the bottom right hand side of your screen to initiate a request.

http://assets1.desk.com/
false
addshoppers
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete