[Resolved] Best Media Queries (breakpoints) GP

Home Forums Support [Resolved] Best Media Queries (breakpoints) GP

Home Forums Support Best Media Queries (breakpoints) GP

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #263710
    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.

    #263744
    Leo
    Staff
    Customer Support

    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 */
    }
    #263784
    Tom
    Lead Developer
    Lead Developer

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

    #264066
    Daniel

    Thanks 🙂

    #264069
    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?

    #264120
    Leo
    Staff
    Customer Support

    Nope that’s what I see as well.

    #264147
    Tom
    Lead Developer
    Lead Developer

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

    #1319120
    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?

    #1319538
    Tom
    Lead Developer
    Lead Developer

    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.

    #1323086
    anabella

    OK, thanks a lot Tom!

    #1323937
    Tom
    Lead Developer
    Lead Developer

    No problem 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.