How to make the side-menu "disappear" in thin / smartphone mode?

Check the @media queries in the original css, depending on what and how you are creating a new css, they might be overwritten by what you modified.
By default the Responsive theme does what you want. The stacking effect is controlled by those @media queries.
The original css for this will be found in /THEME FOLDER/core/css/responsive.css

Thank you for this feedback. I’ll have a look for this @media code.

I’ve been trying to crack this, but so far I haven’t been able to effect the responsive behaviour.

I have create a child theme. It’s basically just a folder called “responsive-child” and within it are two css files “style.css” and “responsive.css”

I’ve been working on the “responsive.css” file which I have adapted from the file with the same name in the parent theme.

I’ve added this on the top of the page…
@import url("../responsive/core/css/responsive.css");
…so as to link it with the parent Responsive theme.

Within these sections:
@media screen and (max-width: 320px) {
@media screen and (max-width: 240px) {

… I have included this:

.show-240 {
	display: none;
	}

	.widget-wrapper {
	display: none;
	}

	#widgets {
	display: none;
	}

… to see if I can make the right sidebar (widgets) vanish when I collapse the browser window, but so far my edits have made no changes when checking the site.

I have found the solution…

For some reason, the responsive.css file in my child theme folder just wasn’t being read by the parent theme. Either it didn’t point/link to the parent theme properly, or it just didn’t like which folder it was sat in… not exactly sure(?)

I copied the code from the responsive.css file and pasted it into the bottom of the style.css file, and re-uploaded it.

Now my mod of the theme functions as it’s supposed to again. Sigh of relief… I have deleted the responsive.css file in my child theme, and all is well ??