Space Between Share Buttons

Hi you should add below code in the theme options custom css block

a.crucify-facebook (margin-right:10px;)

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?

I got it. it is margin: left. But I have responsive problem with 240×320 and 320×480 device.

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;
<strong>width: 166px;
float: left;
display: block;
</strong>}

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

To avoid the new css rules being overwritten when you update your theme, insert them into the style.css file of your child theme, or if you are not using a child theme then use a custom code plugin such as simple custom css to add the code (don’t forget to backup files before making any changes):

a.crucify-link {
  margin-right: 10px;
  display: inline-block;
}

I use this tool to check:https://mattkersley.com/responsive/
After following your suggestion, it is almost fixed.
There is only a slight problem with 240×320 and 320×480 device.

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

Could anyone help me out on this problem? The responsive code I am using is the one suggested by martcol as shown above.

Sorry about my earlier post including the <strong> 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 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 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.

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.

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!

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

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.

I’m glad it is working.

For your latter question I suggest you mark this thread as resolved and open a new question.

O.K. Again thank you so much for your prompt reply.