how to reduce space between buttons

[chikamiku]

Hello THere,

Could anyone please let me know how to reduce space between social icons on the top right of the following site? I am using refined pro theme. I wanted to show all four buttons in one line.

https://www.hanaartsflower.hitechsol.net/

Thanks and regards

[David Borrink]

Your items in that row of buttons are using this selector:

.simple-social-icons ul li a

and one of the settings is the padding which is at 9px. This setting has 9 pixels of padding on all four sides of each object. The objects touch each other. The only way you'll bring them closer together is to reduce the padding setting.

If you want the height the vertical positioning to stay the same but bring them closer together horizontally, you'll need to use this padding setting:

Instead of padding: 9x; you'll need to say padding: 9px 4px; (or anything smaller than 9px for the second number)

which would keep your top and bottom puddings at 9px, but reduce the left and right paddings of each object, thus leaving a 8px gap between the icons instead of 18px (which is a result of having two padding areas of 9px touching each other; by doing 4px on each side, you have 8px between the icons. Get it?)

[chikamiku]

Hi David,

Thank you for the detailed explanation. I believe your proposed solution should solve the problem. However, the problem is I do not see any padding area which has 9 pixels in the style.css file. How strange? The only code I can see in the selector area you mentioned is as follows.
/* Simple Social Icons
--------------------------------------------- */

.announcement-widget .simple-social-icons ul li a,
.announcement-widget .simple-social-icons ul li a:hover,
.genesis-nav-menu .simple-social-icons ul li a,
.genesis-nav-menu .simple-social-icons ul li a:hover {
background: transparent !important;
}

.genesis-nav-menu .simple-social-icons ul li {
margin: 0 0px 0px !important;
}

Unfortunately, I am, not able to find the related padding area. I am sorry to bother you again. But, will you please direct me to that as well?

Thank you so much again.

[David Borrink]

Your code might be in one of the plug-in's style sheets. When that happens, what I do is put the overriding code in the "Additional Code" area in the dashboard Customizer.

.simple-social-icons ul li a, .simple-social-icons ul li a:hover, .simple-social-icons ul li a:focus {
padding: 9px 4px;
}

See if that works. Then edit the second number to get the spacing the way you like it.

[Author]

Posts