Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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 .