Annoying mobile menu issue

[dutchsnowden]

I am pretty sure this did worked before, but now, on a mobile, when I open the menu, the menu is completely to the right out of screen, and you need to scroll to see it.

This is when I clicked the hamburger menu, it opens right of the screen and is very annoying.

And you need to scroll right to see it:

Can I do something about this issue?

[Marc]

Have you made any alteration to templates? If so, I would advise in the first instance that you revert those and test

[dutchsnowden]

No. This is default template. I made a copy of default template (I can delete it) but ONLY changed background color. So definitely NO CHANGES to any template.

 

1 ad added, and one button added for admins in editor. Pretty sure NOTHING else and these are not the cause.

[dutchsnowden]

Only two themes I mentioned above. BOTH DEFAULT, one I started changing colors but stopped after background color changed a few days ago. Stock/default everything.

[Marc]

This may well actually be your device here. I am unable to replicate this on our end

 

[dutchsnowden]

Your browser seem very wide. I am on Android 12 normal portrait. Microsoft Edge browser.

But happens on Samsung Internet browser exactly the same, menu is completely out of the screen to the right:

What other devices and browsers I should try?

On microsoft edge if I keep it landscape works ok:

I did updated recently to Android 12. Is this possible to behave incorrectly under Android 12?

I ask this because more than one browsers on my mobile and I get confirmation from other users, experience the same issue.

[Marc]

Sorry, Im a little confused here, as that doesnt appear to be closed on your screenshot there.

[dutchsnowden]

Let me rephrase, maybe my command of the language is not the best.

Everything is perfect until you WANT TO OPEN the hamburger menu on the top right corner. When you touch that menu, the menu does open, but it opens OFF_SCREEN to the right. Not on screen over the current page. 

At first I thought it is broken and menu does NOT open at all, but then I noticed the "close menu" x button is still on screen and tried scrolling to the right, so basically what happens is like the media query goes wrong and "thinks" the screen is suddenly wider, than it actually is.

 

This is the opened menu. As you can see it is off screen to the right. Only X button is still on screen and a sliver of menu.

Than offscreen menu should open normally on screen, right? Not off-screen to the right.

[Marc]

That is correct, yes. What I was confused about is the image you last posted, with the menu open. Have you done that on another device?

[dutchsnowden]

No, I have here like 20 devices, Andrdoid and iOS. What browser? What you want me to try? But nevertheless Andrdoid 12 should also work, right? I ignored it for a bit but today started to receive complains about it.

 

Edited January 17, 2022 by dutchsnowden

[dutchsnowden]

• iPhone X, iOS 14, and Safari, works OK.
• Samsung S10e, Android 11, Samsung browser, does not work OK, opens the same off-screen.
• Samsung Flip3, Android 12, Samsung browser, does not work OK, opens the same off-screen.
• Samsung Note 10+, Android 12, Samsung browser, does not work OK, opens the same off-screen.
• Samsung Note 10+, Android 12, Microsoft Edge, does not work OK, opens the same off-screen.

 

This is what I personally tested just now. Not sure others who reported the issue what they use. But clearly on Android 11 and on Android 12 there is an issue.

 

[dutchsnowden]

Anyway, this is a somehow urgent issue, because even if for me this looks crazy, reality is this:

Edited January 17, 2022 by dutchsnowden

[Marc]

This is being caused by your custom advertisement code. When that is disabled, there are no issues present

[dutchsnowden]

Oh wow. So basically an AD can break this? Is there a workaround to protect forum against such appearances?

 

Any help? What inside that ad can break it?

 

This is not something I can control, advertiser gave me what they have. Any way to protect the forum against an ad doing this? Or at least disable it for mobile?

[Marc]

Of course, anything you add to the site outside of our normal functions has the potential to break things I suspect there that it's the static width you have set on that iframe, but would not be able to tell you for certain. It would be for you to take up with the ad provider. You can disable it for mobile using code as shown here

 

 

[dutchsnowden]

In fact a way of having different versions for mobile and desktop would be the best solution. Show mobile-version on mobile, show desktop-version on desktop.

 

2 minutes ago, Marc Stridgen said:

Of course, anything you add to the site outside of our normal functions has the potential to break things I suspect there that it's the static width you have set on that iframe, but would not be able to tell you for certain. It would be for you to take up with the ad provider. You can disable it for mobile using code as shown here

 

 

Awesome, thank you so much! Going to try it now.

 

So I added this to the div:

<div align="center" border=0 padding=0 margin=0 class='ipsResponsive_showDesktop ipsResponsive_showTablet ipsResponsive_block'>

Should this not show on desktop?

[dutchsnowden]

From help file not very sure what ipsResponsive_block is. But it does not show on desktop.

 

Consider this closed. I used hidephone and suddenly it works. I will ask for different ad for mobile.

 

[dutchsnowden]

Thank you so much Marc and sorry for the torture! Great support thank you!

 

[Ehren]

11 hours ago, dutchsnowden said:

So I added this to the div:

<div align="center" border=0 padding=0 margin=0 class='ipsResponsive_showDesktop ipsResponsive_showTablet ipsResponsive_block'>

Should this not show on desktop?

You can simplify that code to this:

<div class="ipsResponsive_hidePhone ipsType_center">
  ** ad code **
</div>

That will center the ad on all screens, and will hide it on mobiles (anything smaller than 768px).

[dutchsnowden]

Awesome. hidePhone is already in. I will get rid of everything else and add center. Thanks a bunch @Ehren!!!🥳

<div class='ipsResponsive_hidePhone ipsResponsive_block ipsType_center'>

This is how it looks in mine now.