[Support request] Mobile Landscape Responsive Mode Stretched

[Craig]

I am using GP with the Target theme I have made some changes to my theme to add icons to the menu. Once the site is turned to landscape mode on a mobile device the page loses its clean look and the logos are out of place is there a way to tell the landscape version of the mobile site to use the menu it uses in the portrait version?

I have been looking at this topic that has some good information but I still can’t get the screen stretching to stop.

https://generatepress.com/forums/topic/mobile-site-in-landscape-mode/

[Fernando]

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

[Craig]

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

[Fernando]

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.

[Craig]

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

[Fernando]

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

[Craig]

How do I do the same for the secondary menu thanks

[Fernando]

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

[Craig]

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.

[Fernando]

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

[Craig]

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?

[Fernando]

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

[Craig]

This would work

[Fernando]

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

Can you try that?

[Craig]

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.

[Author]

Posts