Ipad Landscape break point

Support
#1

hi,

My menu on my site at www.wpeagle.com is going onto two lines when viewed with an ipad in landscape mode.

is there away to adjust the breakpoint so it shows th mobile.

I’ve tried existing code i’ve found on the forums which appears to change the breakpoint, however the menu doesn’t show correctly.

Thanks,

-Alex

#2

Hi There,
Thanks for writing in!

The theme having certain break point CSS to work properly across devices.
If you will break it with custom CSS it might have issue with other elements or devices size.
Which is not recommended any way. I would like to suggest you to please decrease your menu font and icon size a little bit. Also you can decrease gap between them also letter spacing to work properly in iPad landscape mode.

Hope this helps!

#3

Hi,

Could you share the CSS I need to just decrease font size and spacing on iPad in landscape mode please?

Thanks

-Alex

#4

Hi @alexdigital,

Please add this CSS to your global custom CSS.

@media ( max-width: 1360px ) {
.x-navbar .desktop .x-nav > li > a {
    font-size: calc(10px + 0.5vw) !important;
}
} 
@media ( max-width: 1265px ) {
.x-navbar .desktop .x-nav > li > a {
    font-size: calc(10px + 0.3vw)  !important;
}
}
@media ( max-width: 1137px ) {
.x-navbar .desktop .x-nav > li > a {
    font-size: calc(10px + 0.1vw)  !important;
}
}
@media ( max-width: 1034px ) {
.x-navbar .desktop .x-nav > li > a {
    font-size: calc(9px + 0.08vw)  !important;
}
}

Your menu dimension is designed for big screen, changing the breakpoints means you’re displaying mobile items for desktop screens too.

Thanks!

#5

Thanks!

Works well. Is there anyway to reduce the spacing between the menu items on ipad too?

Thanks again!

-Alex

#6

Hi Alex,

In each CSS block for each media query in the code @Rad provided, you may add a left and right padding value to the CSS blocks just like:

 @media ( max-width: 1360px ) {
    .x-navbar .desktop .x-nav > li > a {
        font-size: calc(10px + 0.5vw) !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

Kindly repeat the same code in the rest of the media query block and change the value of the left and right padding accordingly.

Here are some related links of the suggestions above for further reading:

Hope this helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.