2014 Theme Media Query Widths

  • I’m trying to sort out exactly what devices the widths of the Twenty Fourteen theme media queries are targeting but I can’t find any documentation. The research that I’ve done hasn’t allowed me to match any devices to the widths. ex: min-width 783px doesn’t appear to match any device. Is there a list somewhere that I haven’t found?

    Best,
    James

Viewing 1 replies (of 1 total)

  • You may wish to try copying the list of media queries from your parent style.css onto your child, then modify them. Here’s what is working for me so far…

    @media screen and (max-width: 400px) { /* includes Galaxy s4 and iphone 5 portrait */
    {enter style here}
    }

    @media screen and (min-width: 401px) { /* includes Galaxy s4 and iphone 5 landscape */
    {enter style here}
    }

    @media screen and (min-width: 594px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 673px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 783px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 810px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 846px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 1008px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 1040px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 1080px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 1110px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 1218px) {
    /* YOUR STYLE GOES HERE */
    }

    @media screen and (min-width: 1260px) {
    /* YOUR STYLE GOES HERE */
    }

    /**
    * 12.0 Print
    * —————————————————————————–
    */

    @media print {
    /* YOUR STYLE GOES HERE */
    }

Viewing 1 replies (of 1 total)
  • The topic ‘2014 Theme Media Query Widths’ is closed to new replies.