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

Posted by Preben Finnøy Olafsen
Preben Finnøy Olafsen
3,459 Points

Making social icons be more responsive (@media)

Hello fellow people chilling in the treehouse.

Currently working on a little project, just so I get used to working with creating websites. However, I have a little problem making it more responsive. There is especially one thing that bothers me that I can't seem to figure out .

I want the social icons in the boxes on the right side of my title-box to be centrally aligned underneath the title-box when the size of the page is below 540px.

To illustrate (shitty paint) https://gyazo.com/e807522736af673624b5fe15f68d8c17

Codepen: http://codepen.io/fishingjoker/pen/mPLwzJ

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

It's probably going to be easiest to do that with media queries... which I don't see at all in your CSS as of right now.

Preben Finnøy Olafsen
Preben Finnøy Olafsen
3,459 Points

I had tried it earlier today. For some reason it works magically as it should now.

Thank you for the tip!

Ernie Cancino
Ernie Cancino
175 Points

Hi can you show me how it looks on CSS and HTML when you use media queries. Thank You.