[Resolved] Mobile breakpoints, best practice

Home Forums Support Mobile breakpoints, best practice

  • This topic has 3 replies, 3 voices, and was last updated 8 months ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1304840

    I’m styling my sites using breakpoints, however I am unclear on the precise way to target mobile devices

    I see some GP people saying

    only screen and (max-width: 767px)

    and others saying

    only screen and (max-width: 768px)

    Which is the best one to use? When I say “best”, I mean the one to use to stop getting mixed results and to avoid a mix up of layouts in GP. The trouble I have is that I am seeing a mix of both breakpoints used and dont know which is best.


    Customer Support

    Hi there,

    best to use the ones provided here:


    Where possible we try to stick to them….


    Yes I get that, usually I use

    (max-width: 768px) {
    /* CSS in here for mobile only */

    but I still see so many posts using

    (max-width: 767px) {

    Looking at the theme files it looks like unsemantic uses the following breakpoints

    while GP uses
    min-width: 769px

    $desktop = apply_filters( ‘generate_desktop_media_query’, ‘(min-width:1025px)’ );
    $tablet = apply_filters( ‘generate_tablet_media_query’, ‘(min-width: 769px) and (max-width: 1024px)’ );
    $mobile = apply_filters( ‘generate_mobile_media_query’, ‘(max-width:768px)’ );

    If I use

    (max-width: 768px) { /* CSS in here for mobile only */ }
    as specified in
    then it looks as though these rules will actually be applied to tablets (in portrait mode) as well running at 768px width, eg

    Apple iPad 1, 2 3, 4, Air, Air2, Pro 9.7, mini 2, 3, 4 , Nexus 9, Microsoft Surface

    So I’m thinking that I might need to change “generate_tablet_media_query” to be

    $tablet = apply_filters( ‘generate_tablet_media_query’, ‘(min-width: 768px) and (max-width: 1024px)’ );
    $mobile = apply_filters( ‘generate_mobile_media_query’, ‘(max-width:767px)’ );

    Lead Developer
    Lead Developer

    Hi there,

    This is 100% preference.

    767px is typically mobile-only, whereas 768px will catch portrait tablets.

    In some cases, 767 makes sense for the code you’re targeting, and in some cases, 768 makes sense.

    For example, we use 768 for a lot of the code in GP as it makes more sense to display/activate those features on tablets than it does to wait for mobile-only.

    So if your design is fine on tablet, you can target mobile-only. However, if your design on tablet needs tweaking, 768 may be the way to go.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.