Welcome to the Treehouse Community
Looking to learn something new?
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.