brooke_babington on "[Theme: Customizr] Responsive sidebars"

Thanks for your speedy response. After spending a day and a half trying to figure this out I worked it out almost immediately after posting my problem.

I had some padding values set in rem:

article.format-aside .entry-content {
	padding-top: 5.714285714rem;
	padding-bottom: 5.714285714rem;
	padding-left: 10.714285714rem;
	padding-right: 10.714285714rem;
}

.entry-content {
	padding-top: 5.714285714rem;
	padding-bottom: 5.714285714rem;
	padding-left: 10.714285714rem;
	padding-right: 10.714285714rem;
}

img.page {
	padding-left: 10.714285714rem;
	padding-right: 10.714285714rem;
}

which I have now changed to %:

article.format-aside .entry-content {
	padding-top: 9%;
	padding-bottom: 9%;
	padding-left: 18%;
	padding-right: 18%;
}

.entry-content {
	padding-top: 9%;
	padding-bottom: 9%;
	padding-left: 18%;
	padding-right: 18%;
}

img.page {
	padding-left: 18%;
	padding-right: 18%;
}

This solved the problem of my posts being pushed off the screen on smaller devices and images are now resizing accurately.

To workaround the problem of the sidebar showing I added:

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	#right.widget-area, #left.widget-area {
		display: none !important;
	}
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
	#right.widget-area, #left.widget-area {
		display: none !important;
	}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	#right.widget-area, #left.widget-area {
		display: none !important;
	}
}

@media screen and (min-width: 600px) and (max-width: 800px) {
	#right.widget-area, #left.widget-area {
		display: none !important;
	}
}

@media screen and (min-width: 320px) and (max-width:568px) {
	#right.widget-area, #left.widget-area {
		display: none !important;
	}
}

@media screen and (min-width: 320px) and (max-width:480px) {
	#right.widget-area, #left.widget-area {
		display: none !important;
	}
}

@media screen and (max-width:320px) {
	#right.widget-area, #left.widget-area {
		display: none !important;
	}
}

@media screen and (min-width:240px) and (max-width:320px) {
	#right.widget-area, #left.widget-area {
		display: none !important;
	}
}

@media screen and (max-width:240px) {
	#right.widget-area, #left.widget-area {
		display: none !important;
	}
}

Following your code snippet here: http://www.themesandco.com/snippet/media-queries-responsiveness/