Site logo

Archived topic

Sidebar for mobile devices

3 replies · Started by mkjj on July 27, 2021

Viewing posts 1–4 of 4

This sounds like a pretty simple thing, but I couldn't figure it out. We set the right sidebar width to 30%, and the content area to 70%. Max width is set to around 1200px. At 768px the sidebar switches from right to bottom. I would like it to switch earlier. So, I changed the media query to:

@media (max-width: 1024px) {
  .is-left-sidebar.sidebar, .is-right-sidebar.sidebar{
    width: auto;
    order: initial;
  }
  .container .site-content .content-area {
    width: auto;
  }
}

But that doesn't work. Obviously, I am missing something.

Hi there,

try this CSS:

@media (max-width: 1024px) {
    .site-content {
        flex-direction: column;
    }

    .site-content .content-area,
    .site-content .is-right-sidebar {
        width: 100%;
    }

    .one-container.right-sidebar .site-main {
        margin-right: 0
    }
}

Works like a charm. Thank you very much!

Glad to be of help

This archived topic is closed to new replies.