Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Need to put my social media icons at the bottom of the page. Suggestions?

I am trying to put my social media icons at the bottom of the page. Can someone help me?

Cheers

Tom

This is my code:

https://w.trhou.se/adz1wumhhe

Cheers!

Also my heading 1 is not scaling to mobile size. Any ideas?

Many thanks!

4 Answers

Tom,

For what I see your social media icons should already be at the bottom. Where are they being showed?

Hi Rafael

They are currently showing on the side.

Any suggestions?

Also my heading 1 is not scaling to mobile size.

Hmmmmm

Any suggestions much appreciated

Cheers!

For the icons try to set margin: auto;

For the h1 see if you have the max-width: 100%

Tom, on your main.css right on the FOOTER division you've made set this right below the footer {}:

footer a { margin: auto }

If you want to set the margin to top and bottom so you make it with four values:

margin: 1px auto 2px auto

1px to top, auto do right, 2 pixels to bottom and auto to left. Choose top and bottom the best way you want. Just don't forget to set auto to left and right, for they will be aligned right on the center bottom of your page!

Your h1 won't break up or do anything since its one word coadycreative, also I see in the index file multiple declarations for the h1 in the style tag, twice another line-height, try to change this and group it all together. The size 5em won't scale... Try for instance 5vw. This will scale according to viewport width (hence the vw)

Also your icons in the footer, try adding footer a img {display: inline-block;} So they appear next to each other.

As well for the #gallery li instead of float: left, use inline-block ! And change the width from 45% to 44%

footer should just need text-align: center and you're set