Changing breakpoint for vdo/vmo

Our designer is having some problems with the responsive aspect of this (very nice and useful) add-on and she asks if she can change the breakpoint where it currently switches from the vdo to vmo elements?

Is this possible? Thanks

1 Like

Sure. Just fork and edit the theme component.

2 Likes

Thanks, I had a look but I don’t find it there… I guess it’s relying on some Discourse setting that applies throughout the site, not just for that menu?

Any way - we have it working with CSS media queries. Not ideal, but we can live with this.

1 Like

The switch from vdo - view desktop only - to vmo - view mobile only - is based on the user-agent in your browser and not on the width of the viewport you use / simulate.

CSS media queries are not as important in Discourse as they are in other sites that you might be accustomed to.

Discourse serves different optimized markup based on the device the user is on.

What I’m getting at is that you don’t need to worry much about CSS media queries. Your designer needs to either add ?mobile_view=1 to the URL they’re testing on, or use a mobile user-agent while testing / debugging things on desktop.

3 Likes

Interesting :thinking: thanks for taking the time to explain.

But when I am on desktop, playing with my browser window size, I see Discourse reacting and rearranging stuff on screen. That’s not coming from my user agent string, I assume. Is there another mechanism reacting to screen size?

For example: that time-lapse scroll bar on the right disappears at small widths and is replaced by a smaller indicator with just the post number and total like 19 / 24

1 Like

You’re not wrong.

Discourse will move things around if you shrink your window size enough. We do this to accommodate for different desktop / laptop screen sizes.

That’s not the point here though. Shrinking the viewport won’t trigger user-agent change because it’s entirely based on the user-agent of the device you’re using.

If you’re on desktop and you change the window / screen width, Discourse will adjust to that as much as reasonably possible.

However, if you’re trying to test what Discourse looks like on mobile while you’re on desktop, then you need to either add

like I mentioned above

or test on a mobile device.

4 Likes

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