Social Media Footer Alignment

[minterdewitt]

This is what I want it to look like, here. This is what it currently looks like, here. Now, I’ve tried doing what SuicideGirls did and use li elements, but that screwed everything up even further. And for some reason, CSS-Tricks has been very finicky over the past few days and it won’t accept block code. So, here is my website. And here is their website. I’ve tried block and inline-block, but I’m admitting defeat here. Any and all suggestions will be muchly appreciated. Extra warm fuzzies to the person who can tell me how to make those numbers live instead of static.

[Senff]

• Remove the 32px width, 32px height, background color and border radius from .social and apply them to .social a img
• Add display:block; to .social a

From there, you should see everything lined up, then you can play around with sizes and more details re: placement.

[minterdewitt]

Okay, so I did that, but I can’t seem to budge the strong and span to align it with the social media icon. I’ve tried margin-top, top, and various other things in my CSS, but nothing seems to change their positions. You can see my progress here.

[hackyaaa]

“strong” is a phrase tag meant to style texts.

Basically, you are trying to add style to a style tag.

You need to change your html.

My suggestion is that you read up on some basic css rules and learn basic html.

[minterdewitt]

Thanks, @wolfcry911. Works like a charm. You can see it here in the footer. Now, the only question I have left is if there’s a way to center the three separate footers specifically on mobile devices. If you visit the page on a smartphone, you’ll see my reasoning behind this.

[jurotek]

Add margin-left:113px to .social.fluttrpop-girls, .social.photos, .social.comments in appropriate media query

[Paulie_D]

Whenever I see centering as a requirement my first thoughts are to inline-block and text-align:center

[Author]

Posts