Which browser loads the correct mobile display?

Support
6

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.

image
image642×369 13.5 KB

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.