Title: Space Between Share Buttons
Last modified: August 24, 2016
---
# Space Between Share Buttons
* Resolved [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* (@tui-lei-hai)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/)
* I added a share button with coding. How do I add a space between the two. And
how to make it responsive?
* Here is the link: [http://lifelessonshome.com/how-to-relax-your-mind-by-slowing-down/](http://lifelessonshome.com/how-to-relax-your-mind-by-slowing-down/)
Viewing 15 replies - 1 through 15 (of 15 total)
* [pluspt2001](https://wordpress.org/support/users/pluspt2001/)
* (@pluspt2001)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988193)
* Hi you should add below code in the theme options custom css block
* a.crucify-facebook (margin-right:10px;)
* Thread Starter [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* (@tui-lei-hai)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988194)
* This is what I have in my custom css.
* .crucify-link {
padding: 5px 10px; color: white; font-size: 15px; font-weight:
bold; }
* .crucify-link:hover,.crunchify-link:active {
color: white; }
* .crucify-twitter {
background: #41B7D8; }
* .crucify-twitter:hover,.crucify-twitter:active {
background: #279ebf; }
* .crucify-facebook {
background: #3B5997;
* }
* .crucify-facebook:hover,.crucify-facebook:active {
background: #2d4372; }
* .crucify-social {
margin: 20px 0px 25px 0px; -webkit-font-smoothing: antialiased;
font-size: 12px;
* }
* Where should I add the line suggested?
* Thread Starter [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* (@tui-lei-hai)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988203)
* I got it. it is margin: left. But I have responsive problem with 240×320 and
320×480 device.
* [martcol](https://wordpress.org/support/users/hotmale/)
* (@hotmale)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988204)
* You could add `margin-right: 10px;` to your rule here:
* ```
.crucify-facebook {
background: #3B5997;
}
```
* To make it responsive try this:
* ```
.crucify-link {
padding: 5px 10px;
color: white;
font-size: 15px;
font-weight: bold;
width: 166px;
float: left;
display: block;
}
```
* And add:
* `overflow: hidden;`
* to the .crucify-social.
* See how you get on.
* If the float gives you trouble on small screens then you might need a [@media](https://wordpress.org/support/users/media/)
query to remove it at a suitable break-point.
* I’m not in a situation where I can really test that but have a go.
* [barnez](https://wordpress.org/support/users/pidengmor/)
* (@pidengmor)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988207)
* To avoid the new css rules being overwritten when you update your theme, insert
them into the **style.css** file of your [child theme](https://codex.wordpress.org/Child_Themes),
or if you are not using a child theme then use a custom code plugin such as [simple custom css](https://wordpress.org/support/topic/space-between-share-buttons/?output_format=md)
to add the code (don’t forget to backup files before making any changes):
* ```
a.crucify-link {
margin-right: 10px;
display: inline-block;
}
```
* Thread Starter [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* (@tui-lei-hai)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988216)
* I use this tool to check:[http://mattkersley.com/responsive/](http://mattkersley.com/responsive/)
After following your suggestion, it is almost fixed. There is only a slight problem
with 240×320 and 320×480 device.
* [pluspt2001](https://wordpress.org/support/users/pluspt2001/)
* (@pluspt2001)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988321)
* you can use a media for this screen size
install respond plugin so that it also
work in IE8 and right your customised style for these screen sized 240×320 and
320×480 device … Write media query code at the end of your style.css file
* you can seek help from google on how to write media query for this or experts
here can guide you further
* Thread Starter [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* (@tui-lei-hai)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988332)
* Could anyone help me out on this problem? The responsive code I am using is the
one suggested by martcol as shown above.
* [martcol](https://wordpress.org/support/users/hotmale/)
* (@hotmale)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988341)
* Sorry about my earlier post including the `` tags in. I had hoped to
just emphasise the lines I was adding.
* I think that you do need to give your floated elements a width.
* If you add a [@media](https://wordpress.org/support/users/media/) query to remove
the float at width 320px they should stack.
* ```
@media (max-width: 320px) {
.crucify-link {
float: none;
}
.crucify-facebook {
margin: 12px 0 0 0;
}
}
```
* Again, I am not really in the best place to work this out but if you try that,
you should get the idea and maybe tweak it a bit.
* [@media](https://wordpress.org/support/users/media/) queries go at the end of
a style sheet and I hope that you are using a child theme? If not, at least a
CSS plugin.
* Thread Starter [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* (@tui-lei-hai)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988353)
* But without both the opening and closing strong tags, the text “Share With Twitter”
and “Share with Facebook” got cropped for 240×320 device. In other words, both
the text are not centralized.
* [martcol](https://wordpress.org/support/users/hotmale/)
* (@hotmale)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988390)
* Whoa, sorry again…
* In my post #5 above, I had two strong tags in the CSS. That was an accident and
it’s very wrong. I wasn’t referring to your code!
* Thread Starter [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* (@tui-lei-hai)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988404)
* With the strong tags, the social share buttons appear alright. The text (Share
On Twitter & Share On Facebook) breaks into two lines for 240×320 device. But
they are not centralized.
* How to centralize the text?
* One more thing currently this social share buttons appear only in the single
post. What code do I need to add to have them in both pages and home page?
* This is the code I have in the functions.php
* Thread Starter [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* (@tui-lei-hai)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988405)
* Hey Martcol, in fact it is working perfectly now. I keep the strong tags and
the the text (Share On Twitter & Share On Facebook) social share buttons break
into two lines. The text are centralized.
* A million thanks for your time and tenacious effort. Greatly appreciated.
* [martcol](https://wordpress.org/support/users/hotmale/)
* (@hotmale)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988407)
* I’m glad it is working.
* For your latter question I suggest you mark this thread as resolved and open
a new question.
* Thread Starter [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* (@tui-lei-hai)
* [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988409)
* O.K. Again thank you so much for your prompt reply.
Viewing 15 replies - 1 through 15 (of 15 total)
The topic ‘Space Between Share Buttons’ is closed to new replies.
* In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
* 15 replies
* 4 participants
* Last reply from: [Tui Lei Hai](https://wordpress.org/support/users/tui-lei-hai/)
* Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/space-between-share-buttons/#post-5988409)
* Status: resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics