How can I change the sidebar width in the desktop and mobile view properly?

Question

I'm currently setting up some documentation with mkdocs and Material for Mkdocs and want to increase the sidebar width.

I have included an extra .css file within the mkdocs.yml. And in the .css file I have changed the md-sidebar class to:

.md-sidebar {
  min-width: 320px;
}

This works fine for the desktop view. Unfortunately when I am reducing the browser window size and the page is switching to the mobile view, the whole layout is corrupt.

I know that setting a global width cannot be the right solution to satisfy both views ... but I have not found anything in the documentation of mkdocs or material for mkdocs to change stylesheets settings depending on the given viewport :(

Does anyone has an idea how to set the sidebar width depending on the current viewport?

Answer 1

If you're still seeing the menu when collapsed on mobile and it won't expand properly, it's because you need to subtract the difference from the left like this;

.md-sidebar--primary {
    width: 15rem !important;
    left: -15rem !important;
}

This makes it work on both platforms for me.