Center Social Buttons Responsive...

User 2088758 Photo


Senior Advisor
2,721 posts
Online Now

Hey guys,

Has anyone figured out how to center social buttons within a column with-in RLMP?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 122279 Photo


Senior Advisor
12,629 posts
Online Now

Within RLM, use inline-block.
After export, try text-align: center; in main.css.
/* Layout Elements */

body > .row > [class*='coffee-span-'].column-1 {
background-color: #e67ce6;
text-align: center;
}
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 434929 Photo


Ambassador
937 posts

Steve wrote:
Hey guys,

Has anyone figured out how to center social buttons within a column with-in RLMP?


If you mean social buttons within a column with-in RLMP then

1st step - Set margin auto for left and right.
2nd step - Display as table.

It Lets the element behave like a <table> element
Guys at coffeecup are awesometacular.
User 122279 Photo


Senior Advisor
12,629 posts
Online Now

Yeah, that one is a better solution, actually. :)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2088758 Photo


Senior Advisor
2,721 posts
Online Now

Excellent thanks!
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 10077 Photo


Senior Advisor
1,045 posts

I usually just add a container to the column for my social buttons. I know which ones that I'll be putting in the container as well as their width so I set the container class as "social button" and then width as wide as the social buttons and left- & right-margins as auto.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 2716614 Photo


Registered User
21 posts

This is a great tip using display Table. I've been trying to center an image and this works just great. Thanks Mansour.
User 434929 Photo


Ambassador
937 posts

There is a whole set of display values the force non-table elements to behave like table-elements, if you need that to happen. It's rare-ish, but it sometimes allows you to be "more semantic" with your code while utilizing the unique positioning .

div {
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
}

View following links

https://developer.mozilla.org/en-US/doc … SS/display

http://www.sitepoint.com/web-foundation … -property/

http://caniuse.com/#feat=css-table
Guys at coffeecup are awesometacular.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.