Overriding media queries: skipping a screen size range

  • Unknown's avatar
    stonenick · Member ·

    I would like to know if it’s possible to ‘skip’ a screen size range using media queries in custom CSS.

    The Twenty Twelve theme is a mobile first theme with three screen-size ranges defined by media queries. For simplicity I’ll call them small, medium and large.

    Small (the default) is anything up to 599px wide
    Medium (@min-width:600px) is from 600px to 959px wide, and
    Large (@min-width:960px) is anything wider than 960px

    I would like to know if I can effectively remove the medium range, and just have two sizes: small for anything below 960px and large for anything 960px and over?

    The blog I need help with is: (visible only to logged in users)

  • ehtis · Staff ·

    Hi Euan,

    Interesting question, here are my two cents.

    You can’t directly edit the CSS file here on WordPress.com, so removing the min-width:600px blocks won’t be possible.

    And since it’s a mobile-first theme, anything that’s not included in media queries will be applied to the mobile version. Please correct if wrong.

    One thing that can be tried is, you include specific CSS customizations in a (@max-width: 960px) media query block. Copy over mobile-specific code into this block, and see how it behaves. Should work for small screen sizes till 960px width, which is usually for tablets.

    Let’s see what others have to say, and your thoughts as well.

  • Unknown's avatar
    stonenick · Member ·

    Thanks ehtis. Yes, I realise we can only add to CSS, not change it. Many tweaks are possible, but media queries present a challenge.

    You are right: since the theme is mobile-first, the bulk of the style sheet is devoted to layout at 599px or below.

    I will keep experimenting. Maybe I might be able to target the ‘medium’ width (between 600 and 960 px wide, which corresponds to, say, an iPad in portrait orientation) using (@min-width:600px) and (max-width:960px), but picking out the bits of relevant CSS is the tricky part!

    I was wondering if I could use the initial keyword to unset the CSS in the (min-width: 600px) block, effectively disabling it?

  • Unknown's avatar
    thesacredpath · Member ·

    You can create your own media queries that will override the existing. You should be able to write your own “medium” media query and design it the way you want it.

  • The topic ‘Overriding media queries: skipping a screen size range’ is closed to new replies.