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
Jack Fitzgibbon
7,607 PointsCSS Alignment, need help!
Hello, When in mobile view the 3 articles don't center align. Just wondering if anyone would know how do do this.
CodePen: http://cdpn.io/viLIm
Thanks in advance.
4 Answers
Don Shipley
19,488 PointsNot sure where you are at but you may try in your media in your css @media (max-width: 350px) { article { float: none; margin: 0 auto; } }
Joshua Moreno
3,884 PointsMaybe add a media query for max-width of whatever resolution it becomes one column and add this css to the media query
article { float: none; margin-left: auto; margin-right:auto; }
That should work
Don Shipley
19,488 PointsI see @media in a lot of the videos... To write my code I would use @media only screen.... I just put in the 350px not knowing where he is at. Posted mine before I saw Joshua post both should work. Yes you can use the 754px.
Jack Fitzgibbon
7,607 PointsJoshua Moreno Don Shipley, Thank you both very much!:)
Joshua Moreno
3,884 PointsJoshua Moreno
3,884 Points@Don Shipley - his issue is occuring at 754px and below. So maybe instead of 350px it should be 754px. Also, you didn't include "screen" in the media query declaration. I've never seen it without it, is that shorthand or just a typo?
@Jack Fitzgibbon Better yet edit your margins to percentages and turn the articles into a one column layout at a lesser width. That way there isn't so much white space on the sides.