# Changing breakpoint for vdo/vmo

**URL:** https://meta.discourse.org/t/changing-breakpoint-for-vdo-vmo/277625
**Category:** Development
**Tags:** custom-header-links
**Created:** [December 17, 2019, 10:49am UTC](https://meta.discourse.org/t/changing-breakpoint-for-vdo-vmo/277625 "2019-12-17T10:49:09Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![pgr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pgr/32/156783_2.png) [@pgr](https://meta.discourse.org/u/pgr)
#### Post date: [December 17, 2019, 10:49am UTC](https://meta.discourse.org/t/changing-breakpoint-for-vdo-vmo/277625/1 "2019-12-17T10:49:09Z")

</div>

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

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [December 17, 2019, 2:35pm UTC](https://meta.discourse.org/t/changing-breakpoint-for-vdo-vmo/277625/2 "2019-12-17T14:35:55Z")

</div>

Sure. Just fork and edit the theme component.

---

<div class="post-metadata">

### Author: ![pgr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pgr/32/156783_2.png) [@pgr](https://meta.discourse.org/u/pgr)
#### Post date: [December 17, 2019, 3:25pm UTC](https://meta.discourse.org/t/changing-breakpoint-for-vdo-vmo/277625/3 "2019-12-17T15:25:05Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [December 17, 2019, 3:56pm UTC](https://meta.discourse.org/t/changing-breakpoint-for-vdo-vmo/277625/4 "2019-12-17T15:56:16Z")

</div>

> [@pgr](#):
>
> Our designer […] asks if she can change the breakpoint where it currently switches from the `vdo` to `vmo`

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.

---

<div class="post-metadata">

### Author: ![pgr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pgr/32/156783_2.png) [@pgr](https://meta.discourse.org/u/pgr)
#### Post date: [December 17, 2019, 4:42pm UTC](https://meta.discourse.org/t/changing-breakpoint-for-vdo-vmo/277625/5 "2019-12-17T16:42:34Z")

</div>

Interesting 🤔 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

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [December 17, 2019, 5:33pm UTC](https://meta.discourse.org/t/changing-breakpoint-for-vdo-vmo/277625/6 "2019-12-17T17:33:56Z")

</div>

> [@pgr](#):
>
> 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?

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

> [@Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588/64):
>
> `?mobile_view=1` to the URL they’re testing on

like I mentioned above

or test on a mobile device.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [September 10, 2023, 7:10pm UTC](https://meta.discourse.org/t/changing-breakpoint-for-vdo-vmo/277625/7 "2023-09-10T19:10:42Z")

</div>

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