WordPress.org

Ready to get started?Download WordPress

Forums

Media Queries Help (8 posts)

  1. HecticHouseTom
    Member
    Posted 2 years ago #

    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

  2. James Duffell
    Member
    Posted 2 years ago #

    @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.

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

    ^JD

  3. HecticHouseTom
    Member
    Posted 2 years ago #

    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.

  4. HecticHouseTom
    Member
    Posted 2 years ago #

    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 ?

  5. James Duffell
    Member
    Posted 2 years ago #

    @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

  6. HecticHouseTom
    Member
    Posted 2 years ago #

    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 :)

  7. James Duffell
    Member
    Posted 2 years ago #

    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

  8. HecticHouseTom
    Member
    Posted 2 years ago #

    Haha no problem you have been a great help thank you :)

Topic Closed

This topic has been closed to new replies.

About this Topic