Share buttons overlapping/cutoff

stephenbass1 · Member · May 6, 2014 at 7:35 pm
Copy link

Add topic to favorites
Any way to fix the buttons to where the Linkedin and wordpress do not overlap? Is there anyway to make it so where the number part is not partially cut off?

http://the-life-study.org/2014/05/04/gender1/

Thank you!

Stephen

The blog I need help with is: (visible only to logged in users)
stephenbass1 · Member · May 6, 2014 at 7:40 pm
Copy link
Also, when I do the official button for facebook, it only likes it but does not give the option to share it :(. Is there anything for this?
thesacredpath · Member · May 8, 2014 at 1:20 am
Copy link
Stephen, I’m not seeing any overlap on your social icons.

Add this and see what you think. It makes the sharing buttons all the same size and aligns the text to the left.
```
.share-icon {
    width: 80px;
    text-align: left;
}
```
stephenbass1 · Member · May 8, 2014 at 1:39 am
Copy link
Excuse me. It was with the official buttons.
Whenever I do the text it allows me to share, but whenever I do official it is only like. I guess the better part would be the official buttons if I had to choose one.

For instance here:

http://the-life-study.org/2014/02/09/5-ways-to-get-all-the-motivaiton-youll-ever-need-for-exercise-and-for-life/

Thank you yet again sacred path!
stephenbass1 · Member · May 8, 2014 at 1:40 am
Copy link
Timethief — do you know of ways to make them cleaner/prettier?
thesacredpath · Member · May 8, 2014 at 5:45 am
Copy link
Stephen, let’s widen the div the sharing icons are in and use a media query to set a left margin for #div to keep the sharing buttons and the content from overlapping each other. See what you think of this.
```
div.sd-content ul {
    width: 130px;
}
@media screen and (max-width: 1280px) {
    #page {
        margin-left: 140px;
    }
}
```
When moving a widget up and into a place it was not designed to be, sometimes it can be a little tricky to get everything to look right and work right, but I think the above gets us pretty close.
stephenbass1 · Member · May 8, 2014 at 6:22 am
Copy link
Thank you! Looks great.
sorry–one last thing— would you happen to know how they could line up to look neat?
My apologies– I am just trying my best to make it as professional as possible and share friendly :)
thesacredpath · Member · May 8, 2014 at 2:50 pm
Copy link
Add the following. It makes the buttons a uniform width, floats them to the left and left aligns the text within them. See what you think.
```
.share-icon {
    float: left;
    width: 100px;
    text-align: left;
}
```
Then, to space the icons off the left browser window edge just a touch, change the “left” value in div.sd-content ul to 5px.
stephenbass1 · Member · May 8, 2014 at 9:42 pm
Copy link
Wonderful! That is great.
When I change the px to anything but 0 it goes very far into the page. I tried 05, 5, or any other number for the left value and the same. strange.
thesacredpath · Member · May 9, 2014 at 4:56 pm
Copy link
Not sure what was happening with the 5px change to the left value. I went into your customizer and made the change and it seems to be working fine. Check your site and see what you think.
stephenbass1 · Member · May 9, 2014 at 5:57 pm
Copy link
worked perfectly when you did it! checked the css and tried to do the same thing, but I guess you had the magic touch.

Special thanks sacred path!
thesacredpath · Member · May 9, 2014 at 5:59 pm
Copy link
You are welcome as always, and sometimes the web and software can be fickle.

No items found.