[Resolved] Mobile breakpoints, best practice

Home Forums Support Mobile breakpoints, best practice

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

    Hi,
    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


    @media
    only screen and (max-width: 767px)

    and others saying


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

    Thanks
    Ben

    #1304895
    David
    Staff
    Customer Support

    Hi there,

    best to use the ones provided here:

    https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

    Where possible we try to stick to them….

    #1305013
    Ben

    Yes I get that, usually I use

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

    but I still see so many posts using


    @media
    (max-width: 767px) {

    Looking at the theme files it looks like unsemantic uses the following breakpoints
    min-width:768px
    and
    max-width:767px

    while GP uses
    min-width: 769px
    and
    max-width:768px

    eg
    $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

    @media
    (max-width: 768px) { /* CSS in here for mobile only */ }
    as specified in
    https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints
    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)’ );

    #1305318
    Tom
    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.