Change Share Button Style on mobile

Thanks for the message.

Unfortunately no, you can’t change styles at different breakpoints without code customization by yourself.

The share button styles are simply CSS classes applied to the buttons themselves.

There are two ways you could approach changing the styles on smaller screens:

1. Add CSS to your theme (or in Appearance > Customize > Additional CSS) that adjusts the styles of the “classic” button to look more like the “Block” style on a smaller device. For reference, here’s the styling for classic and block styles.

2. Use Javascript to change the actual CSS class on the button, which will auto-update the styles. Something like this: https://gist.github.com/billerickson/ac9bd49d9a85abf399706da766a93a8c

Ok great, I see. The javascript doesn’t actually work while resizing the browser, you need to refresh to make it happen. I probably need to put the code into some kind of function but because I am not that strong with Javascript, I went with the CSS version that worked great!

/* Remove social share button  text on mobile */
@media (max-width: 769px) {
	
	.shared-counts-button span.shared-counts-label {
		display: none !important;
	}
	
.shared-counts-button .shared-counts-icon {margin: 10px !important;}

.shared-counts-button .shared-counts-icon svg {
	width: 20px !important;
	height: 20px !important;
	}
	
} 

Thanks again Bill!