Media Queries Help

@hectichousetom

I think it could be worth checking out the following post on media queries, I have a feeling that’s what you’re after if I’ve understood the question.

https://css-tricks.com/css-media-queries/

^JD

Yeah thats sort of what I want to do thanks … although if possible Id like to do it from within the one style.css and even though I know it is something like @media (min-device-width: 320px max-device width 639px) {styles etc} im unsure of how I would code it for all of the style sheets I have created.

Ignore that last post I understand it know but how would I set it up for the style sheets i have created:

320
640
800
1024
1366

first one `@media all and (max-width: 640px) and (min-width: 320px) {

}
}`

then the second

@media all and (max-width: 800px) and (min-width: 604px) {

  }
}

? is that right ?

@hectichousetom

I’d,suggest keeping the, separate due to my code OCD.

I’ve not done it before but what I suspect you could do is call in a file such as style.php and then within this file run the various queries which intern would link to styles/320.css.

Not sure if you’d like to give that a whirl, I suppose it would mean everything isn’t within style.css :/

It would though eliminate seeing all these queries at the top of your header file.

^JD

Ahh so something like this in my style.css may work ?

@media all and (max-width: 640px) and (min-width: 320px) {
  @import url (/320.css)
  }
}

Thanks Ill give that a go ??

Ye that’s the trick, on my iPad so I can’t easily do any tests to really help out any further though sorry.

^JD

Haha no problem you have been a great help thank you ??