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
Kyle Werstein1,956 Points
Setting li:first-child margin:auto is changing size of element with media query. Why is this?
I'm fiddling in my workspace trying to work out some of the concepts of the flexbox and I noticed something strange. I set the margin-auto property for li:first-child and all of my nav items stay the same size, like in the video.
However, I added a media query that changes the -webkit-flex-direction to 'column' under 610 pixels and removes the auto margins, but now my first item is 10 pixels larger than the other ones. Is there a way to keep the sizing consistent?
first off, checkout this link below. This is a really good overview of flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Second, to try and answer your question, margins set to auto absorbs extra space, so this might be a reason why your seeing an increase. I would also look at the chrome dev tools and see what is going on. I never heard of this issue.
if you want the page to be responsive and have everything turn into a column instead of a row you don't have to use a media query. You can use the flex-wrap property, and choose wrap this will at smaller pixel widths wrap the divs into a column. I would read the CSS Tricks article. Its great.
Not a problem, any time.