I am building my first site with Source, and it is going pretty well so far. In the site’s footer, I am adding some social media icon links via html in the Source Coder Stack, but want to center them. Since centering by html code is suposedly taboo in HTML5, I am trying to do it by placing the Coder Stack in a Source Container, set to center- but it unfortunately does not center the html content. Any suggestions? Thanks.
Use a three-column grid for your footer?
1 Like
Unfortunately the 3 column grid make it even worse. It makes the icons stack on top of each other. My goal is to show the icons horizontally and centered.
I have managed to make the same arrangement work with Foundation 6 on other sites, by putting the html code in a centered container with a one column stack. I’m stumbled on how to get the same result with Source.
Okay, I found a solution. Since I could not figure it out with pure Source components, I tried Joe Workman’s 1 column stack from his (free) Starter Pack collection. It centered up the icons perfectly. All is well.
Glad you found a solution! I don‘t think I made myself clear — what I meant was ‘use a Source Grid stack’ and make a three column grid for the footer, not use a three-column grid stack.
Good you found a way to make your approach work, but you are massively over complicating what you are trying to do, i.e. adding html into a Coder and then placing that inside a Container and then inside another developers free stack all because you are trying to just centre some icons
I made a whole series of tutorials of which the first would be relevent to what you are doing.
Positing content inside things and on the page is what Sourcedoes best, so spending some time on Source turorials will be time well spent.
3 Likes
Thanks Gary, your tutorial is exactly what I need! It seems that the use of Utility Classes is key. Good to know.