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

Media queries break point

HI guys I hope you all are doing great.

Listen, I was doing some research because I need some specific media queries breakpoints to use in foundation and I don't get it yet :(

for example.

I want to display some divs in one way only for320W - 480H but the same divs have different attributes for only 360W - 640H and only 480W - 800H

Any idea how I can approach this. Thanks a lot guys. Look froward to hear back from you.

4 Answers

Hi Carlos,

Maybe this will work:

@media only screen and (max-width: 320px), screen and (max-height: 480px) {
    div
    {
        /*display your div here one way only*/
    }
}

@media only screen and (max-width: 360px), screen and (max-height: 640px) {
    div
    {
        /*display same div, different atribute*/
    }
}

@media only screen and (max-width: 480px), screen and (max-height: 800px) {
    div
    {
        /*display same div, and yet another different atribute*/
    }
}

Great Jeff, let me give it a try,. Thank you very much!!

James Barnett
James Barnett
39,199 Points

If you are still having issues, read up on how media queries work and post back here with any specific questions you've got.

Thank you James. I will .