[Support request] I am optimizing on tablet in portrait mode and I have a problem with the menu

[Mathieu]

Hi Tom,

I am trying to optimize my website on tablet (in portrait mode) and it seems like that makes the menu goes on a second line.

See screenshot : https://prnt.sc/nkoh1l

I could probably make the text smaller but there’s enough space to stretch it out and there’s so many different device size and configuration that I feel that the smaller text strategy would not fix the problem everywhere.

Anything I can do?

Regards,

[David]

Hi there,

which size tablet are you using?

[Mathieu]

That’s an Amazon Fire 10 inches.

[David]

you could use the CSS provided here to initiate the mobile navigation earlier:

https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

i am getting mixed messages as to what the breakpoint size should be for that device. the large iPad uses 834px for its portrait orientation.

[Mathieu]

Hi David,

I am sorry for the super long feedback to your answer, but I didn’t have a much time to really look into it lately.

I’ve fixed that menu issue at the 834px break point like you told me. It’s great.

But even if that bring the mobile menu it still doesn’t bring the mobile layout.

I end up with a mobile menu but I have a super super thin sidebar and a contracted content zone.

I would like the whole website to turn like a cellphone on tablet portait.

Is it possible?

Regards,

[David]

I provide some CSS here to do that:

https://generatepress.com/forums/topic/collapse-sidebar-immediately-when-it-reduces-in-size/#post-972240

Just adjust the 1100px in the @media query to match.

[Mathieu]

Perfect! Thankss

[David]

You’re welcome

[Author]

Posts