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

CSS

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Media Queries: How many is too many?

Hi Treehousers! :)

I'm working on something of a personal project just now and currently at the CSS stage where I'm working out how to refactor the layout for the page so it looks nice on all sorts of devices.

So I've put a lot of media queries together on the basis of not targeting media queries for devices but for various points where the screen "breaks" and the layout isnt working or isn't appropriate for the resolution.

This is media query as it is right now (don't worry about asking for the page or the HTML at the moment, my question coming up is quite specific. :)

@media screen and (max-width: 726px) and {max-width: 950px) {




    #website-banner {
        left: 30px;
    }

    #content {
        width: 70%;
    }



}

@media screen and (max-width: 710px) and (max-width: 725px) { 

    * {
        margin: 0px;
        padding: 0px;
    }

    header {
        height: 250px;
    }

    #website-banner {
        display: block;
        float: none;
        margin: 0;
    }


}

@media screen (max-width: 654px) and (max-width: 709px) {
    * {
        margin: 0px;
        padding: 0px;
    }

    header {
        height: 250px;
    }

    #website-banner {
        display: block;
        float: none;
        margin: 0;
    }

    #content {
        max-width: 90%;
    }

}


@media screen and (min-width: 0px) and (max-width: 653px) { 
    header {
        margin: 0 auto;
    }

    #logo {
        display: block;
        width: 300px;
        float: none;
        margin: 0 auto;
        position: relative;

    }

    #logo img {
        display: block;
        width: 90%;
        float: none;
        left: -30px;
        margin: 0 auto;
    }


    #website-banner {
        display: block;
        float: none;        
        margin: 0 auto;     
        position: relative;
        left: 0px;
    }


    #content {
        display: block;
        max-width: 90px;

    }

}

@media screen and (min-width: 0px) and (max-width: 653px) {

}


@media screen and (min-width: 0px) and (max-width: 710px) {
    #content {
        display: block;
        max-width: 90%;

    }
}

At a basic level, my question is this... when does it get to the point that you're using too many media queries?

Is there such a point? Or is it necessary to use all the media queries you need to get the job done? I've used 5 or 6 here already but I'm not done trying to find all the breakpoints yet?

Thanks :)

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

I noticed that some of your media queries have 2 max-widths set. The first one should be a min-width.

On other queries you have min-width: 0px which is unnecessary. The max-width alone is fine on those queries.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Colin,

Thanks for picking those out. That could change a lot.

Though I do prefer to use min and max queries as they contain adaptive layouts to specific widths. It's useful particularly if you're only overriding specific styles

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

As long as you don't set max-width or min-width twice in one query you are good.

2 Answers

kathrynpeterson
kathrynpeterson
16,001 Points

I'm doing something similar to you in terms of a personal project and am at about the same point. In keeping with the idea of minimizing calls to the server, I'm planning to adapt my content to conform more or less to two major size transitions, as Nick demonstrated in the teaching videos. I don't know how difficult this is going to turn out to be, since I'm revamping/updating an old, existing site I built under old XHTML standards and I'm trying to convert it to HTML5 bit by bit. And, I have another site to do after this one. Sigh. Point being that if you're having to make too many little adjustments to avoid content breaking in terms of media queries, making the changes to the content itself might be something to take a fresh look at. Possibly there are layout adjustments you could make that would lessen the need for so many media queries. Just a thought. And hey, good luck with your project!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Kathryn,

I'm sorry I totally forgot to reply to you. :)

I've managed to do a bit more work on my project but I've been so busy with work and Treehousing I just haven't had the time :) But I think I'm getting there with reducing my media queries a little bit and finding a structure to reduce breakpoints, so maybe your idea was the best one. :)

3 seems to be the optimal number for media querys and assets and the like if you can manage it and is probably best for performance too/

Stephen Van Delinder
Stephen Van Delinder
21,457 Points
Stephen Van Delinder
Stephen Van Delinder
21,457 Points

It depends on the site layout and what features so there's not a hard and fast rule, but I'd say too many is better than not enough. I usually use 3 major breakpoints because it's easier to keep organized. Obviously you want to limit the gross calls to the sever, so it's best to have them on fewer style sheets rather than importing more external documents.

Hope this helps.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Thanks for your reply! :) Yes I've got 3 stylesheets at the moment (one where I keep all media queries) and I want to keep it at no more than that, and unless I really have to, try not to add more media queries so i'll look hard at this.

Good to hear though that too many isn't frowned upon. :)