iPad Pro Portrait Mode Issues

[Ethan]

Hi there, my site works fine on desktop, mobile and non-pro tablets. But iPad Pro portrait mode things are looking messy.

My site’s logo gets so small and left hand side menu just overflowing over the main content are and looks messy. Here’s my home page. Please see it in an ipad pro in portrait mode.

Is there anyway I can fix this?

[Leo]

Hi there,

This is what I’m seeing using the browser simulator:
https://www.screencast.com/t/2snzJnjGDH9r

Is that what you are seeing as well?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ethan]

Hi Leo,

That’s weird. This is wat I see on my ipad pro:
screencapture

[David]

Hi there,

the main issue is your sidebars are set to 15% wide which is not wide enough for the widgets.
Try increasing it to 20% in Customizer > Layout > Sidebars

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ethan]

Hey David, thank you so much. You were right. It’s working now.

Only one thing, why is the site logo is exteremly small in portrait mode (iPad pro)?

[David]

Can you disable the cache and lazyloader so i can see whats causing that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ethan]

just disabled them David.

[Leo]

I’m still seeing some sort of caching going on.

Can you disable all of your caching plugs and server cache?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ethan]

I am using WP Rocket and will disable everything now

[Leo]

This CSS you’ve added is causing the issue:
https://www.screencast.com/t/dGBIsZHiZK

The massive margin-left is pushing the logo to be super small.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ethan]

Oh I see, I remembered that one. I did that to push the search bar to the right. Otherwise it doesn’t look symetrical. I change dit again thanks @Leo. Search bar seems a bit weird now I guess I can’t have them both at the same time.

[Leo]

Otherwise it doesn’t look symetrical.

Not sure if I understand.

What’s weird about the search bar now?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ethan]

Sorry @leo that wasn’t very clear.

I want search bar to finish by extactly where the container finishes. Like end of “Guides” button for example. Is that clear?

If you look at my logo it starts where the container starts and I want search bar to finish where the container ends.

[Leo]

It’s not at the end as you have this CSS added:

.dgwt-wcas-search-wrapp {
    width: 39%;
}

Try changing it to:

.dgwt-wcas-search-wrapp {
    width: 39%;
    margin-right: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ethan]

Thanks @Leo it works perfectly. And thanks @David as well. You guys are amazing.

[Author]

Posts