• I have Created seperate style sheets for each of the following screen widths for my template:

      320
      640
      800
      1080
      1280
      1360

    and was wondering how I could change the style sheet using media queries to detect the screen and adjust style accordingly.

    thanks in advance Tom

Viewing 7 replies - 1 through 7 (of 7 total)
  • @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

    Thread Starter HecticHouseTom

    (@hectichousetom)

    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.

    Thread Starter HecticHouseTom

    (@hectichousetom)

    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

    Thread Starter HecticHouseTom

    (@hectichousetom)

    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

    Thread Starter HecticHouseTom

    (@hectichousetom)

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Media Queries Help’ is closed to new replies.