Problem with responsive

try adding this css statement in a custom css plugin or child theme.

.main-sidebar{
z-index:999;
}

That looks rather strange try this and see if you like it better.

.main-sidebar{
  float:none;
  width:100%;
  z-index:999;

}

and

@media (min-width: 950px)
.main-sidebar {
    width: 18% !important;
    float: left;
}

Thanks .. much better, but something looks strange.

You need to add both parts above. The first part changes the sidebar to 100% width and removes the float so it doesn’t look strange.

.main-sidebar{
  float:none;
  width:100%;
  z-index:999;

}

and the second part changes the screen so the sidebar only takes up 18% width and floats it to the left.

@media (min-width: 950px)
.main-sidebar {
    width: 18% !important;
    float: left;
}

You still have a problem. The menu bar is on the left and your button is on the right. You might want to float the menu button left and the title right.

How can I solve this?

Many thanks.

I don’t see your media query

@media (min-width: 950px)
.main-sidebar {
    width: 18% !important;
    float: left;
}

this is controlling the sidebar when it gets above 950px.

Now I have the whole right part black and only if I scroll I can see some content

.main-sidebar{
float:none;
width:100%;
z-index:999;
background-color: darkred;
}

@media (min-width: 950px)
.main-sidebar {
width: 18% !important;
float: left;
background-color: darkred;
}

This is what I put in the custom css

I think i made it.

Thanks a lot