Mobile Landscape Responsive Mode Stretched

Hi Craig,

For reference, can you provide the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

This is the link if you look at the site on a mobile device and turn it to the side you will see what I mean thanks in advance https://geordiegadgets.co.uk

The issue occurs around below 1273px screen width. It's occurring because of the structure. The menu forced at the Center of your Header, however, and at some point, it wraps because of your menu width. Basically, the header of this theme only works as expected if you have a small menu. Otherwise, the issue will occur.

Two thing you can do is increase the Mobile Menu Breakpoint to 1273px, or change the structure.

Thanks, Fernando how would I go about adjusting the breakpoint to 1273 px?

You can do so in Appearance > Customize > Layout > Primary Navigation.

How do I do the same for the secondary menu thanks

Try adding this in Appearance > Customize > Additional CSS:

@media (max-width: 1273px) {
    .secondary-navigation .menu-toggle, .secondary-navigation .mobile-bar-items, .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: block;
    }

    .secondary-navigation ul, .gen-sidebar-nav {
        display: none;
    }

    [class*=”nav-float-“] .site-header .inside-header > * {
        float: none;
        clear: both;
    }
	
	.secondary-navigation .main-nav>ul{
		display:none;
	}
}

Thanks that works, however, the items show to the right of the page is there any CSS I can add to center the menu items? the menu is now functional in mobile landscape so that is a big leap in my design i am thankful for the help.

I see. Try updating the code to this:

@media (max-width: 1273px) {
    .secondary-navigation .menu-toggle, .secondary-navigation .mobile-bar-items, .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: block;
    }

    .secondary-navigation ul, .gen-sidebar-nav {
        display: none;
    }

    [class*=”nav-float-“] .site-header .inside-header > * {
        float: none;
        clear: both;
    }

    .secondary-navigation .main-nav>ul {
        display: none;
    }

    nav#secondary-navigation.toggled > .inside-navigation {
        flex-direction: column;
    }

    .secondary-navigation.toggled .main-nav>ul {
        display:flex;
    }
}

Thanks for that centered ok but it looks a little off due to the text being small there is a lot of space on each side. How would I go about getting both portrait and landscape to the left as it originally is on the portrait mobile site?

You mean display them horizontally? For instance, something like this?: https://share.getcloudapp.com/04uWQwW0

This would work

I updated the code here: https://generatepress.com/forums/topic/mobile-landscape-responsive-mode-stretched/#post-2364678

Can you try that?

This looks good thanks for the updated code. I will leave the site with the updated code and come up with some icons that will compliment the theme.