Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Theme not responsive on iPad Pro

Home Forums Support Theme not responsive on iPad Pro

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #430429
    jbpyn

    Hi Again,

    My site is not responsive on the iPad Pro 10.5. It seems to work on every other device, just not that one. Horizontal view works as it should, but rotating to vertical the theme doesn’t respond. It seems to work find on the iPad Mini, and 9.7″ iPad.

    Any clues?

    I will have a staging site up later, if its necessary.

    GeneratePress 1.4
    GP Premium 1.5.4
    #430771
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Your site seems to be down right now.

    Technically, there should be no difference between devices. Are you using the same browser?

    #431019
    jbpyn

    Yep, I’m having quite the week. It is up again now.

    Yes, using the same browser. Safari across all devices. But it doesn’t seem to matter. I have tried every mobile browser under the sun. Everything looks fine when

    Using responsive design mode everything looks fine, but loading the site in portrait on the 10.5 device it just scales everything.

    #431032
    jbpyn

    Turns out the same thing is happening on the 12.9″ screen. I’m sure you have your own way for checking these things, but these are accurately showing what happens.

    http://responsivechecker.net/device/ipad-pro-10-5

    http://responsivechecker.net/device/ipad-pro-12-9

    Does this have to do with breakpoints?

    #431181
    Tom
    Lead Developer
    Lead Developer

    Ah, well the tablet display kicks in at 1024px, which is pretty standard.

    According to that test, the 10.5in Pro is 1112px wide, which is huge.

    Not sure the tablet view would look very good at that width? The desktop site should be compatible with touch.

    If you need it to be mobile, are there specific elements you want to target? The menu? Sidebars?

    #431247
    jbpyn

    Sorry, I meant portrait. Which is 834 wide, 1112 tall. So the other way around. The site looks fine in landscape, as it should. But when you turn the tablet up, vertically it is supposed to flip into responsive mode and show the mobile interface. It works that way on the smaller tablets.

    But, yes the menus. The left sidebar is the issue. Will changing the container size do anything?

    Thanks again

    #431249
    Tom
    Lead Developer
    Lead Developer

    Ah, mobile kicks in at 768px.

    You can initiate the mobile menu at a higher width like this: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

    We’ll be introducing an easier way with less CSS shortly after GP 2.0 is released.

    Then try this CSS:

    @media (max-width: 834px) {
        .sidebar,
        .content-area,
        .inside-footer-widgets > div {
            float: none;
            width: 100%;
            left: 0;
            right: 0;
        }
    }
    #431991
    jbpyn

    Perfect, that’s the ticket. Thanks Tom.

    Looking forward to seeing 2.0. You guys are on fire. I don’t know how you sleep, let alone stay so patient and helpful.

    I’m spreading the word.

    Thanks again

    #431995
    jbpyn

    Ah, there is one little problem with this. The site responds, but the menu and logo ends up at the bottom, rather than the top.Easy fix no doubt.

    #432051
    Tom
    Lead Developer
    Lead Developer

    Ah, since you’re using a sidebar navigation, you need to display the cloned mobile menu at your desired width:

    @media (max-width: 834px) {
        .sidebar-nav-mobile {
            display: block;
        }
    }

    Just a guess as it looks like you removed the above CSS for now. Let me know if it doesn’t work 🙂

    #432081
    jbpyn

    Got it,thanks again Tom. I’m a day ahead of you, but I’ll wish you a happy weekend just the same.

    #432135
    Tom
    Lead Developer
    Lead Developer

    Did it work?

    Thank you! Hope you have a great weekend as well 🙂

    #435324
    jbpyn

    I just checked out for the weekend to be honest. I rationalised that very few people will ever look at the site that way, so it could wait. Unfortunately, testing it this morning, I can see it doesn’t quite work.

    I haven’t had a change to play with it much. But I think I get the principle now, so I’m happy to work through it myself. I have staging site now, but it’s behind http auth. If its useful for you to have a look, how can send you the authentication details?

    #435846
    Tom
    Lead Developer
    Lead Developer
    #468866
    jbpyn

    Hi Tom, I wanted to revisit this now that I’m using 2.0 – I still don’t have it responsive yet. You mentioned above there would be an easier way to do it using less CSS in version 2.0, I would be grateful for that code.

    Thanks again

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