Both mobile and desktop headers showing on phone in desktop mode

I created a header with 2 rows. One row was made visible for browsing on larger screens, and the other row is for small screens. This works great…but on my phone (Android Chrome), when I switch on “Desktop Site”, it’s showing me both rows. I would have expected it to hide one of them. Any thoughts?

I’m using Pro.

Thanks in advance.

Hi @pumpknhd,

I’ve checked the websites under Secure Note, they’re still working fine.

Would you mind providing us with your website which you’re facing the issues?

Thank you so much!

Those are the correct sites. On your phone, (in Chrome), try viewing in Desktop mode (on the chrome options, click “Desktop Site”. That seems to break the headers for me.

Hi There @pumpknhd

I have tested both of the referenced site URLs above and I could not find both headers when loading desktop mode on chrome browser.

Please make sure to clear all caches when testing your site (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

If you’re still having issues, provide us with some screenshots along with more information like the device that you’re testing, so that we can try to reproduce the issue.

Thanks!

Hi, how do I reply with a secure note screenshot? The problem is still there.

Hi @pumpknhd,

I did check your site on Android Phone with Chrome browser and I can’t replicate the issue. The site shows the correct menu.

screenshots moved to secure note.

Please specify what device you’re on, and please clear your browser’s cache and all your caching plugins.

Thanks,

I’ve tried clearing the cache, still same problem. I’m using the Samsung Galaxy Note 9 with Chrome. I tried on a friend’s Note 9 and it’s also doing the same thing.

Hey @pumpknhd,

Samsung Note 9 screen resolution is 1440 x 2960. That should display the desktop version of your headers. Could you please use private browsing mode or the Chrome’s Incognito mode and test your site again? Maybe you can seen us the screenshot of how your site looks like in the Samsung Note 9.

Hope this helps. Thank you in advance.

Just tried Incognito mode and it’s still doing the same thing. Also tried another friend’s Note 8 and it has the same issue. Will be sending secure note with screenshot.

Hi @pumpknhd,

I can’t reproduce the issue of both headers displaying at the same time. Would you mind editing the file \framework\views\global\_meta.php from the theme and change this line

<meta name="viewport" content="width=device-width, initial-scale=1">

to this

<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9">

Then test it again, you could also change the values instead of 0.9. Please check this about templated editing through child theme https://theme.co/apex/forum/t/how-to-upload-xtheme-to-child-theme/43246/2. But in your case, it’s _meta.php. Again, this is not a fix but just to find out if it behaves the same on different scales.

Thanks!

Hi,

I tried changing the viewport as per above. I tried the scales at 0.9 and also 1.9. The same issue of double headers persists even with viewport change. Do you have anyone there with a Samsung Note to try to reproduce this?

Hi @pumpknhd,

I don’t have a real device, but I signup for trials in Browserstack where it has access to real device but I can’t reproduce it there. May I know what’s your Android and Chrome version?

This will be tricky as we have no physical device to test it, and if there is any, debugging would be hard but I’ll continue checking.

Thanks!

Android version - 9
Chrome version - 74.0.3729.157

Interestingly I tried it on Samsung’s Internet browser - and it works fine. So this happens only in Chrome.

Hi @pumpknhd,

I tried with same versions but on a different device and it works okay, perhaps it’s really just on actual note 8/9 which I don’t have right now. I’ll continue checking, but it’s weird since it shouldn’t be device specific since it’s the same software. Though, what’s weird is based on that issue, it bridges on two device resolution and @media isn’t functional (where it’s all based on).

Thanks!

@Rad Thanks for your help so far. One thing I noticed is the top row (right below the navigation bar) is wider in Chrome than in the Samsung browser – meaning that the row/column goes beyond 100% width of the screen for some reason.

CORRECTION: It seems like all the @media stuff is off. Now that I’m looking down the rest of the page, things that should be hidden in either desktop or mobile are both showing up under Chrome in Desktop mode. This is true in both portrait and landscape mode.

Do you have a sample site that I can point my browser to - to see if the problem exists there too?

Hello @pumpknhd,

You can check out our demo sites:

Or the sites in our showcase:

Hope this helps.

Hi, so I just tested. There’s no problem with the X theme. Just the Pro theme.

Hi @pumpknhd,

It appears to be a bug on that chrome and in conflict with “request desktop” feature, and it probably alters the screen size ratio that makes @media not fully functional.

There is no workaround either since is no selector for note 8 and its chrome, but I’ll continue the investigation.

Thanks!

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