Automattic / Automattic/jetpack
Sharing: Pinterest counter display overlap
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
Issue initially spotted on WordPress.com, but reproduced on a self-hosted WordPress.org site and with two different themes (Dyad, Twenty Nineteen).
#### Steps to reproduce the issue
1. Add **Sharing buttons**
2. Make sure **Official Buttons** style is selected
3. Share a post to Pinterest
#### What happened
The Pinterest bubble counter overlaps with the next button:

#### What I expected
That the Pinterest counter shows nicely with other buttons.
In p9cu9o-1Fn-p2, the below CSS fix was offered, and makes the display consistent with the Facebook button:

```
.pinterest_button a span {
position: static !important;
float: right;
width: auto !important;
background: transparent !important;
padding: 0 5px 0 10px;
color: #fff !important;
}
.pinterest_button a span::before {
display: none;
}
```
Contributor guide
Research direction
Start by reproducing the overlap with Sharing buttons using the Official Buttons style and Pinterest, including the Dyad and Twenty Nineteen themes mentioned in the issue. Locate the styling for the Pinterest button and verify the counter matches the supplied CSS behavior without overlapping the next button.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, wordpress
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100