Stuck in Desktop view on mobile from long logo

Product Support

AI-generated summary

The discussion revolves around a user being stuck in desktop view on a mobile device due to a long logo pushing the hamburger menu off the screen. davidkingham describes the issue, which cannot be replicated on meta, and explores temporary solutions such as hiding the logo or changing the URL. Jonathan5 suggests adding a link to the “Community” dropdown menu to switch back to mobile view and removing the “desktop view” option from the hamburger menu. pmusaraj proposes enforcing a max-width on the logo for small window sizes on the desktop layout as a long-term solution. davidkingham finds a temporary fix by swapping out the logo in desktop view below 768px to the mobile logo, suggesting something similar should be implemented in core.

1

This may be considered a bug, but I’m not positive.

I have a user that is stuck in desktop view on a mobile device (who knows why he clicked desktop view) because the hamburger menu is pushed off the screen by our long logo. I can’t replicate this on meta because the logo fits nicely even in desktop view.

I could tell him to change the URL to get out of desktop view, but this is not possible in the discourse app. I can temporarily hide the logo so he can switch back, but an actual solution long term would be nice despite it being an edge case.

I tried disabling all theme components and plugins and can still replicate this.

image
image1104×1574 287 KB

2

You could maybe add the link Nature Photographers Network to the “Community” dropdown menu (to get back to mobile view).

You could remove the “desktop view” option from the hamburger menu using a theme component.

I wonder whether removing the forum from the Discourse app, then reinstating it, would solve the current problem.

3

Yes, I agree, this needs a fix in core, I think the best solution for it would be to enforce a max-width on the logo for small (below 768px) window sizes on the desktop layout.

Also, easiest way to replicate this by using responsive design mode on your browser, but NOT using a mobile user agent. That will load the desktop site, and then you can resize the window to small sizes. (Example below from Safari.)

image
image1580×2012 324 KB

4

Thanks Penar, this gave me the idea to swap out the logo in desktop view below 768px to the mobile logo. Something similar should probably be in core. Thanks!

@media only screen and (max-width: 768px) {
  body {
    .d-header #site-logo {
       content:url("https://images.naturephotographers.network/original/2X/4/45d1b54bc00a5a737fae7dfe3d79b8d8dfd71729.png");
    }
  }
}