[Resolved] Theme not responsive on iPad Pro

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

[Tom]

Hi there,

Your site seems to be down right now.

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

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

[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?

[Tom]

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?

[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

[Tom]

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;
    }
}

[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

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

[Tom]

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 🙂

[jbpyn]

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

[Tom]

Did it work?

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

[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?

[Tom]

Sure, feel free to send it here: https://generatepress.com/contact/

[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

[Author]

Posts