Automattic / Automattic/jetpack

Sharing: Pinterest counter display overlap

Open
#12,343 1 comment 0 reactions 0 assignees View on GitHub
[Feature] Sharing [Pri] Low [Status] Needs Design Bug
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:
Screen Shot 2019-05-12 at 16 40 09

#### 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:

Screen Shot 2019-05-12 at 16 45 30

```
.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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.