Issue With Position of Pin It button

Question

I have some issue with position of Pin It button.

I added this cose to page:

<script type="text/javascript" async defer  data-pin-color="red" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

like pinterest say in official site.

the button appear when hover but in bad position - to much distance from top like you can see in this screenshot:

i didn't find any way to change this position by js or css.

i have no link for this because its on my local machine but you can see it with this screenshot of site and dev tools:

someone knows a solution for this?

Answer 1

You can overwrite the class or the id of the button with !important in css. We can't see what class or id is because you don't share with us the HTML code. Imagine that:

<div class="pinit"></div>

css:

.pinit {
     top : 0px !important;
}

Edit

With pseudoclasses you can:

 a[class$="pin_it_button_20"]{ top: 20px!important ;} 

It means that anchor whos classname ends with pin_it_button_20

You can make it reverse too

a[class^="PIN"]{ top: 20px!important ;} 

It means that anchor whos classname starts with PIN