Jump to content

Annoying mobile menu issue


Go to solution Solved by Marc Stridgen,

Recommended Posts

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.

image.png.a8d39ff31066ce6bf01606b0e4580fde.png

And you need to scroll right to see it:

image.png.902955b3ec1209aa7d4a5ea9837de451.png

Can I do something about this issue?

Link to comment
Share on other sites

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:

image.png.af478522866cac72e2ad5257235dfb30.png

What other devices and browsers I should try?

On microsoft edge if I keep it landscape works ok:

Screenshot_20220117-151856_Edge.thumb.jpg.6e856f4ac0bb9e48767bd21f1a6aabfc.jpg

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.

Link to comment
Share on other sites

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.

 

image.png.a8d39ff31066ce6bf01606b0e4580fde.png

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.

Link to comment
Share on other sites

  • 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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • Solution

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

 

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...