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
orange sky
Front End Web Development Techdegree Student 4,945 Pointsmedia queries
Hello!
When creating media queries, why do we give the width, margin, and padding-left each the value of 'initial'?
In fact, how do we know which elements to set to the value 'initial'?
thanks
5 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Orange Sky,
The initial keyword will set a property back to it's initial value in the css specification. Here's a property reference table for css2.1: http://www.w3.org/TR/CSS21/propidx.html
The values you see in the "Initial value" column are what the properties will be set back to if you use the initial keyword.
For width and height this is auto and for the margins and padding it is 0
So Guil knew those were the values he wanted and so he used the initial keyword to achieve that. He could have just as well set all the values directly.
width: auto is the same as width: initial
So you can use this anytime the value that you want to set on a property happens to match up with what is in the specification.
The initial keyword isn't supported in Internet Explorer either So you might want to use it with caution.
Dustin Armstrong
8,430 PointsHi Orange Sky, I believe the reason for this is to reset those properties to default when screen size hits a certain threshold. For instance, if a higher level CSS document (ie bootstrap.css) commands that padding-left, margin and width be set to certain points and you make edits to that in your custom css document, setting it to initial in the media query will return the property back to the value set in bootstrap.css.
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello Dustin,
Oh, I don't know bootstrap, but when creating a media query for the header which has the logo and the main nav links
1) How do you know which properties to set to 'initial'?
2) How about which properties to set to 'initial', when creating a media query for the columns?
thanks!!!
orange sky
Front End Web Development Techdegree Student 4,945 PointsWow, this is a vast field. Im going to have to learn this stuff in small doses so that I don't freak out by all these possibities. Thank you so much Jason for this link: http://www.w3.org/TR/CSS21/propidx.html and for this breakdown: width: auto is the same as width: initial.
As for IE, it seems to me there are lots of things that it doesnt support. I suppose it is still my responsibility to learn how to find ways to work around it limitations so that anything I create is also accessible to people who use IE. Is there a site to learn what IE doesnt support. Right now, I am learning these things in bits and pieces but it would be nice to just refer to one page.
thanks Jason!!!!
Jason Anello
Courses Plus Student 94,610 PointsI'm not aware of a site that collects all IE problems. Really all browsers have problems and it's just part of being a web developer. I think most/all of us pick it up in bits and pieces as you say.
http://caniuse.com/ is a good general site that contains support tables for all the various browsers.
http://www.quirksmode.org/ is another good one that contains browser compatibility tables.
orange sky
Front End Web Development Techdegree Student 4,945 PointsThanks Jason! That helps a lot. Have a great one!!!