Which browser loads the correct mobile display?

[hipp0]

Tried Edge, Firefox, Brave, and Chrome. None of them are displaying the correct mobile view, I am trying to modify the mobile drop down menu but its showing this desktop view menu.

On my iPhone Safari, Chrome display correctly.

[ToddZ]

The usual way has been by adding ?mobile_view=1 to the end of the URL. Discourse is moving towards responsive design based on viewport size, so depending on the theme, this override might not continue to work.

[NateDhaliwal]

@hipp0

I am trying to modify the mobile drop down menu but its showing this desktop view menu

Are you referring to the navigation menu site setting?

[darkpixlz (Pyx)]

@ToddZ

The usual way has been by adding ?mobile_view=1 to the end of the URL

I actually believe that was removed a few days ago unfortunately:

No more switchable mobile/desktop layouts?

No, it’s not just removed from the sidebar. We have removed the underlying structure to toggle.

[Lilly]

yea the ?mobile_view=1 is legacy and considered deprecated - the newer mobile styling was enabled last year:

@system

Legacy Mobile / Desktop Modes

Historically, Discourse shipped two completely different layouts and stylesheets for “mobile” and “desktop” views, based on the browser’s user-agent. Developers would target these modes by putting CSS in specific mobile/desktop directories, by using the .mobile-view/.desktop-view HTML classes, and the site.mobileView boolean in JavaScript.

These techniques are now considered deprecated and should be replaced with the viewport and capability-based strategies discussed above. We will be removing the dedicated modes in the near future, making “mobile mode” an alias for “viewport width less than sm” for backwards compatibility.

not sure what you’ve done on your own forum for customizations, but i cannot repro this problem on any instance or device. does it do it in safe mode?

[hipp0]

I managed to get it to display the Mobile view on Chrome, still not able to get it to display mobile on Firefox, Edge, or Brave browser.

Do I need Viewport break points in all my mobile code? Do I need to place it in the Mobile section? Most of my mobile CSS is just color changes, header icons, and sidebar width, emoji/font sizes. So doesn’t seem like I need any specific viewport settings.

I was able to fix the code I needed:

/* ==========================================================================
   MOBILE DROPDOWN MENU - ACTIVE STATE
   ========================================================================== */

/* 1. Force the active link text to black */
.d-modal__body .dropdown-menu li.active a,
.d-modal__body .dropdown-menu li.active {
    color: #000000 !important;
}

/* 2. Touch-specific feedback (Discourse Standard) */
html.discourse-touch {
    /* Turn text black while the finger is pressing down */
    .d-modal__body .dropdown-menu li a:active {
        color: #000000 !important;
    }

}

/* 3. Ensure other nav items follow the rule */
.dropdown-menu li a {
    transition: color 0.1s ease;
}

I had some @media css queries that were messing up Brave browser on mobile loading correctly it seems.