Help with Social button spacing

gschlact · January 29, 2014

Hello,
I have the horizontal orientation for the Facebook Like, Google+ and Twitter buttons on my Entire Site on the upper right side. ( http://schlacter.smugmug.com )

How can I reduce the padding around each of those social buttons & text? I want to leave it all horizontal (not put text above). Someone provided me code, but it had no effect in my CSS section. I'll start from fresh here with some much appreciated support.

-Guy
gschlact

Smug Eric · January 29, 2014

something like this should do it:

.sm-page-widget-socialbuttons .horizontal li {
margin-right: -20px !important;
}

But I'd be careful of going too negative with that margin so you don't get overlap on the buttons.

gschlact · January 29, 2014

Eric,
thanks for the help. I tried your code but: 1) it wound up too far right, and 2) if you see my site, you can see there is still a bunch of padding between the buttons.

Someone had provided this code to me, but I couldn't get it to work, do you see how to fix it? But it didn't have settings for all 3 buttons (twitter, google+ and facebook).

.sm-user-ui .sm-pagewidget-socialbuttons {
overflow: hidden;
padding-right: 24px;
}

.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li {
width: 85px;
}

.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li.googleplus {
width: 68px;
}

Smug Eric · January 31, 2014

Adding !important to each of the width and the padding-right line should make it work. And the other two will not need to be specified as the 85px width should fit those. But since the g+ button is smaller then it needs a smaller width.

gschlact · February 1, 2014

Eric,
i appreciate your help. I am not seeing any impact beyound the very first margin-right setting.
I used exagerated pixel widths to attempt to see the impact, but observing anything.
ANY IDEAS?

This is the code as it is in my CSS:

/* from ERIC on DGRIN */
.sm-page-widget-socialbuttons .horizontal li {
margin-right: 5px !important;
}
/* end eric */

/* from HERO Support + !important from Eric */

.sm-user-ui .sm-pagewidget-socialbuttons {
overflow: hidden !important;
padding-right: 1px !important ;
}

.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li {
width: 45px !important ;
}

.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li.googleplus {
width: 48 !important ;
}
.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li.facebook {
width: 48 !important ;
}
.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li.twitter {
width: 48 !important ;
}

denisegoldberg · February 1, 2014

gschlact wrote: »

I am not seeing any impact beyound the very first margin-right setting.
I used exaggerated pixel widths to attempt to see the impact, but observing anything.
ANY IDEAS?

This is the code as it is in my CSS:

...
.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li {
width: 45px !important ;
}

.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li.googleplus {
width: 48 !important ;
}
.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li.facebook {
width: 48 !important ;
}
.sm-user-ui .sm-pagewidget-socialbuttons .horizontal li.twitter {
width: 48 !important ;
}

Try adding the unit to your width statements. Should be 48px, not just 48.

--- Denise

gschlact · February 2, 2014

Unfortunately, still NO luck adding the 'px' back after the 48s. I tried other smaller values again to exagerate but nothing changes. ONLY the right hand margin is the only part of the code that actually is visually working (show a few posts above) from this piece of code:
.sm-page-widget-socialbuttons .horizontal li {
margin-right: 5px !important;
}

IDEAS??

gschlact · February 10, 2014

BUMP - Eric?

gschlact wrote: »

Unfortunately, still NO luck adding the 'px' back after the 48s. I tried other smaller values again to exagerate but nothing changes. ONLY the right hand margin is the only part of the code that actually is visually working (show a few posts above) from this piece of code:
.sm-page-widget-socialbuttons .horizontal li {
margin-right: 5px !important;
}

IDEAS??

Smug Eric · February 11, 2014

Try this code instead:

.sm-page-widget-2209692 .sm-page-widget-content {
margin-right: 25px !important;
padding-right: 0px !important;
width: 235px;
}
.sm-page-widget-socialbuttons .horizontal li {
width: 80px !important;
}
.sm-page-widget-socialbuttons .horizontal li.googleplus {
width: 60px !important;
}

I'm not able to sort out where the extra width is coming from, but this should get all the content on the page and grouped together nicely.

gschlact · February 12, 2014

Eric - Success + some quick feedback. THANK YOU for your multiples efforts to arrive at the fix.
Below is the code that worked together created the proper width for block and individual buttons, and right side aligned with space.

Ironically, it seems that all we need in the first block below is the margin-left = 63 (I left all the code for referrable syntax)
The second two blocks adjust width of the individual button spaces which is why total width isn't really needed. margin left then left me shift whole block to the right until it was where I wanted it. However, I am not sure why just margin-right did NOT work by itself with width: 235px

/* in first group, only need margin left (finally moved block) and width */
.sm-page-widget-2209692 .sm-page-widget-content {
margin-right: 5px !important;
margin-left: 68px !important;
padding-right: 0px !important;
width: 235px ; /* 235px; */

}
.sm-page-widget-socialbuttons .horizontal li {
width: 80px !important;
margin-right: 5px !important;
}
.sm-page-widget-socialbuttons .horizontal li.googleplus {
width: 60px !important;
}

Help with Social button spacing

Comments