# CSS To Auto hide sidebars below certain window size

**URL:** <https://discourse.joplinapp.org/t/css-to-auto-hide-sidebars-below-certain-window-size/41867>\
**Category:** Features\
**Created:** [9 November 2024 06:14 UTC](https://discourse.joplinapp.org/t/css-to-auto-hide-sidebars-below-certain-window-size/41867 "2024-11-09T06:14:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![gal064](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/gal064/32/12509_2.png) [@gal064](https://discourse.joplinapp.org/u/gal064)\
**Post date:** [9 November 2024 06:14 UTC](https://discourse.joplinapp.org/t/css-to-auto-hide-sidebars-below-certain-window-size/41867/1 "2024-11-09T06:14:53Z")

</div>

I wrote custom CSS so when I reduce Joplin screen size, the notebook and note list auto-hide.

This is especially useful when taking notes during a video call so I split my screen between the video and Joplin.

I hope it helps other people!

![CleanShot 2024-11-08 at 22.13.36](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/c/f/cf715e559ec43509e5cdfa6b8e1b17faf26f174a.gif)

```auto
/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */

@media (max-width: 1000px) {
  .rli-sideBar,
  .rli-noteList {
    display: none !important;
  }

  .rli-editor {
    width: unset !important;
    flex-grow: 1 !important;
  }

  .rli-editor > div {
    width: unset !important;
  }
}

```

---

<div class="post-metadata">

**Author:** ![executed](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/executed/32/24298_2.png) [@executed](https://discourse.joplinapp.org/u/executed)\
**Post date:** [11 November 2024 04:38 UTC](https://discourse.joplinapp.org/t/css-to-auto-hide-sidebars-below-certain-window-size/41867/2 "2024-11-11T04:38:07Z")

</div>

Hmm. Will it make sense to add this as a feature toggle?  
CSS class names don't look like they are going to be changed in the future which is the main concern about CSS styling.

BTW I think it's worth sharing this with folks in this [hot thread](https://discourse.joplinapp.org/t/share-your-css/1730)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [6 November 2025 04:38 UTC](https://discourse.joplinapp.org/t/css-to-auto-hide-sidebars-below-certain-window-size/41867/3 "2025-11-06T04:38:12Z")

</div>

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