Working with media queries and min-width

Media queries are an amazing tool that front-end developers have at their disposal these days, but I think most front-end developers who decide to dig into media queries aren’t ready to completely eschew the way they’ve been working. In my case, as with many, I’ve grown accustomed to designing and coding to some sort of grid which is usually around 960px wide. As a result, when trying to add in @media queries to my workflow, my first instinct was to start with one of those fixed-width designs and figure out how to scale it down. Using the @media rule plus ‘max-width’ allows us to do this. (If you need a quick primer on @media queries, this is a good start.) Starting from a site that is 960px wide, if we want to make it scale down for a smaller screen we can do something like this:


#container {
        width: 960px;
        margin: 0 auto;
        background: #ccc;
}

@media only screen and (max-width: 480px) {
#container {
        width: 100%;
        background: #aaa;
}

}

View Example 1 – Resize browser to see it in action

We’ve defined our styles for the ‘main’ resolution, and overridden them inside the @media query for all screen resolutions up to a maximum width of 480px. So we’ve got two places in our css where we’ve defined the width of #container. This totally works but if you do it a few times you quickly realize this is not very efficient and starts to feel like a lot of redundant work. For example, lets say you have a 2 column block, each element floated within it with a width set on each one. (Notice I’ve changed ‘width’ to ‘max-width’ on the #container. This gets us closer to a fluid/responsive layout. Resize and you’ll see.)


#container {
	max-width: 960px;
	margin: 0 auto;
	background: #ccc;
	overflow: auto;
}

section {
	width: 70%;
	float: left;
	background: #eee;
}

aside {
	width: 30%;
	float: left;
	background: #bbb;
}

@media only screen and (max-width: 480px) {
	#container {
		width: 100%;
		background: #aaa;
	}
	
	section,
	aside {
		width: 100%;
	
	}

}

View Example 2 – Resize browser to see it in action

Inside the @media block targeting smaller screens, we’ve overridden all of the values set for the larger screen. In this case it would mean re-setting float, width, and in a real world example things like padding, margin and backgrounds. Why should we do this when can take advantage of the natural state of these elements? All block-level elements, by default, are not floated and have a default width of 100% and this is usually what you want to serve up to the smallest screens, since there’s usually not room to have stuff floated all over the place.


Interested in more than just height-based media queries? Join us at BDConf in Nashville, June 19-20, 2015, for a unique look at the future of mobile design.

A better way

Instead of starting big and using ‘max-width’ to hack away, a better approach is to start small and ‘min-width’ to target ever larger devices. As opposed to ‘max-width’, ‘min-width’ says ‘apply these styles to all screens that are greater than whatever value’.

The way it works in practice is that we can put all of the baseline styles at the top of your css, outside of the @media queries. This is where you can define your basic typography, colors and your general hierarchy. Then for each @media rule you can add as screens get larger. Using @media with min-width we end up with something like this:


#container {
	background: #aaa;
}

section { 
	background: #eee; 
}

aside { 
	background: #bbb; 
}

@media only screen and (min-width: 480px) {
	
	#container {
		max-width: 960px;
		margin: 0 auto;
		background: #ccc;
		overflow: auto;
	}
	
	section {
		width: 70%;
		float: left;

	}
	
	aside {
		width: 30%;
		float: left;
	}
	

}

View Example 3 – Resize browser to see it in action

The end result of the last two examples is functionally identical, but using min-width is a much more elegant solution. Notice that that the background colors are being set just to show a difference between the elements. There isn’t anything at the top of the css in regards to layout. Starting small with min-width reduces redundancy and enables you to focus on structuring your markup logically. It also ensures that many more screen and form factors are taken into account from the beginning as opposed to being an afterthought. Another bonus is that for devices that may not support media queries, you can still serve up a base set of styles that will more likely work that a full site.

Honestly it took me a while to wrap my head around this concept. So in preparation for this article I worked up this little demo that shows it in action.

View Responsive Demo using @media and min-width

Download (3.87KB .zip file)

For more information on a similar topic, check out Mobile First by Luke Wroblewski and make sure to read Ethan Marcotte’s book Responsive Web Design.

19 Comments

  1. tai

    Shaweet. Useful technique!

    Reply
  2. Lucy

    Great article – love the colors in the final demo too. One thing, and I might have this backwards, but in the second sentence under A Better Way heading I think you mean: “As opposed to ‘max-width’, ‘min-width’ says ‘apply these styles to all screens that are GREATER than whatever value’.” ?

    Reply
  3. Jay Barry

    Lucy, you’re correct. Thanks for catching that! I’ve corrected that line.

    Reply
  4. Alf

    Thanks so much for this lovely tutorial. I greatly enjoyed the demo too! I think in the end it /is/ better to start small then build up. I’ve been having trouble using max-width after building a full website, but I know how to utilise this now going forward. Thanks again Jay!

    Reply
  5. Luiz Henrique

    Great post man! You explain Media queríeis in a Very simple war. Saved in bookmarks!

    Reply
  6. Tim

    Hi there, very nicely demoed.
    The only problem is that Media Queries are not accurate.
    It is not your fault obviously, but I wish people would talk about that, too.
    It is easy to check with window size plug in and your demo (or any other site that uses MQ).
    Some times they are off only 20 pixels but other time they are off up to 150 pixels… However, even 20 pixels is very bad when trying to target a certain mobile phone screen.

    Reply
  7. Garabedium

    Awesome article. Thank you for putting it together. Would you have to use javascript to introduce HTML elements for larger layouts? For example, say I have a utility nav that’s only visible when browser size is > 1000, I would need to insert the html via javascript as I don’t want that extraneous code in the mobile environment. Is that correct, or am I missing something?

    Reply
  8. Vince Law

    Thanks for the simple, direct and effective method. Very elegant and compact without all the fluff I don’t need.

    Reply
  9. Joel Norman

    This is a nice tutorial but sorry to say that not working in IE8

    Reply
  10. Flash Star

    Download broken.

    Reply
  11. Move4mMe

    Loved this! Is the download no longer available?

    Reply
  12. Chris L

    Great demonstration! This is sooooo useful for anyone learning CSS3 to create responsive sites! The demonstration works a treat and thank you so much for putting some “frequently used” device sizes!

    Reply
  13. bucur

    veri good this tutorial…

    Reply
  14. Sanjay M

    Thanks these examples are really cool!

    Reply
  15. john

    Finally. A simple, humble, straight-forward explanation from someone not claiming theirs is the one right way to do things. You laid out both cases so readers can decide. My mind automatically thinks like the first example (big to small), but now I clearly see the advantages of the second example (small to big). Thank you!

    Reply
  16. Arun

    unique example and Guide………………………. it’s beginners need, but can’t be downloaded…..

    Reply
  17. Eduardo

    How do you call different stylesheets based on the width in HTML for example to have a stylesheet called phone.css another called laptop.css, desktop.css, etc.
    How do you do so?

    Reply
  18. Dany Davies

    Thanks Brother. Good Tutorial

    Reply

Trackbacks/Pingbacks

  1. Some more responsive resources | welcomebrand - [...] Working with Media Queries and min-width – A great tutorial from Unmatchedstyle (includes some good code examples) [...]
  2. Responsive development resources | welcomebrand - [...] Working with media queries and min-width [...]
  3. Alternative “of the year” awards | welcomebrand - [...] Simplest demonstration of how to work with Media Queries – Unmatched Style’s tutorial [...]
  4. Height-Based Media Queries | Unmatched Style - [...] you are unfamiliar with media queries, take a gander at this article by Jay Barry for a great explanation…
  5. Simon C | Mobile First - [...] As for the project itself, I am currently in two minds whether or not to completely rewrite the structural…

Submit a Comment

Your email address will not be published. Required fields are marked *

More News & Articles

The Essential Guide to Getting Started on Freelance Writing

The Essential Guide to Getting Started on Freelance Writing

Explore the lucrative and fulfilling world of freelance writing with our essential guide. Learn about specialties like blogging, social media, article, and technical writing. Build a portfolio, find work, set up your business, and discover the potential earnings. Embrace the freedom of working from home and follow tips for success in your dream career.

Securing Your Website: A DevOps Security Checklist

Securing Your Website: A DevOps Security Checklist

Learn how to secure your website with a comprehensive DevOps checklist. Dive into SSL/TLS encryption, password practices, and more. Discover the power of Content Security Policy and safeguard your online presence effectively.

EMAIL NEWSLETTER