Mobile breakpoints, best practice

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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)’ );

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts