Center Social Buttons Responsive...

User 2088758 Photo


Senior Advisor
3,086 posts

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
14,447 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 work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 434929 Photo


Ambassador
938 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
14,447 posts
Online Now

Yeah, that one is a better solution, actually. :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2088758 Photo


Senior Advisor
3,086 posts

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,095 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.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including training for Site Designer and Web Form Builder via Zoom.
Email me at support@usconsumernet.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
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
938 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.