Use width breakpoint on sidebar

07-16-2020 09:44 AM
MVP Regular Contributor

In my app, I'm having trouble shrinking the size of the sidebar so that it looks good on a mobile device. Here's the app in Code Pen: 

In this older post they collapse the sidebar into a button, but they're using Bootstrap: First attempt at bootstrap w/ sidebar. I was wondering how to do that based on this Responsive apps using CSS sample code because I'm not familiar with Bootstrap.

(1) When the width breakpoint is less than medium (769-992 pixels) I'd like the sidebar to disappear. (2) In its place I'd like there to be a button. When the button is clicked I'd like to show the content of the sidebar.

To at least get the sidebar to disappear, I can't even find its element ID. This doesn't work:

.esri-view-width-less-than-medium .sidebar {
    display: none;
0 Kudos
0 Replies