[Resolved] Best Media Queries (breakpoints) GP

[Daniel]

I asked a question before either via the forum or email “what are the best media queries to use for GeneratePress”. Tom answered this before, but I can’t find the original email or post in the forum.

Could someone please tell me the best media queries (breakpoints) to use for Desktop, Tablet and Mobile in GeneratePress?

Thanks in advance.

[Leo]

Hi Daniel,

This should help:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
}
@media (min-width: 1025px) {
    /* CSS in here for desktop only */
}

[Tom]

To see your profile, just click on your username or avatar 🙂

[Daniel]

Thanks 🙂

[Daniel]

Regarding the my posts, I can only seem to get to them when I click a link in an email that takes me to a previous post. I can then click on my avatar and from there I can see my posts and favourites.
However, if I click my avatar at the top right of wordpress when logged in, it only takes me to my purchase profile. I can’t find anything to do with my forum posts.
I must be doing something wrong?

[Leo]

Nope that’s what I see as well.

[Tom]

That’s how it works currently – your account page and the forum are separated. I’d like to merge them at some point 🙂

[anabella]

Hi,

I have a question regarding the media queries that Leo mentioned above.
I want to apply some CSS to mobile phone only, so I´m using @media (max-width: 768px).
I don´t have an iPad, but I´m checking Chrome developer tool to see how this looks, and it turns out that the changes I´ve made are also being applied to tablet (not what I want)

I´ve checked the UIKit Size (Points) for ipads, and it says that many of them are 768 X 1024 (iPad Pro 9.7 inch, iPad air 2 and iPad mini 4), so it makes sense that my media query @media (max-width: 768px) is targeting those devices also.

I see that this thread belongs to 2017, so I´m not sure if the standard/recommendable media queries have changed?

[Tom]

Hi there,

Nothing has changed on the GP-side of things. We still use 768px for most things if they make sense to display in mobile-mode on a portrait tablet screen as well.

[anabella]

OK, thanks a lot Tom!

[Tom]

No problem 🙂

[Author]

Posts