- This topic has 3 replies, 3 voices, and was last updated 8 months ago by
Tom.
-
AuthorPosts
-
May 28, 2020 at 5:13 am #1304840
Ben
Hi,
I’m styling my sites using breakpoints, however I am unclear on the precise way to target mobile devicesI 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
BenMay 28, 2020 at 6:12 am #1304895David
StaffCustomer SupportHi 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/May 28, 2020 at 7:47 am #1305013Ben
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:767pxwhile GP uses
min-width: 769px
and
max-width:768pxeg
$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, egApple 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)’ );May 28, 2020 at 9:47 am #1305318Tom
Lead DeveloperLead DeveloperHi 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 -
AuthorPosts
- You must be logged in to reply to this topic.