Mobile breakpoints, best practice

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

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)' );

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.