When I visited my blog on my iPhone, I first couldn’t see the sidebar and thought it was missing. There was an empty space where the sidebar was supposed to be but no sidebar was displayed. But today, for some reason I ended up scrolling to the bottom of the screen and saw that my scrollbar was actually displayed below the main content area and not on the side.

In order to fix it, I first searched for a reason for this in the stylesheet of my parent theme (twenty eleven). There I found the following:

/* =Responsive Structure
----------------------------------------------- */

@media (max-width: 800px) {
	/* Simplify the basic layout */
	#main #content {
		margin: 0 7.6%;
		width: auto;
	}
...
	#main #secondary {
		float: none;
		margin: 0 7.6%;
		width: auto;
	}
...
}

This is the reason why I was having this strange layout on the iPhone. It basically defines an alternative style for displayed of no more than 800 pixel in width (like my iPhone).

In order to fix it, I just had to add the following to the stylesheet of my child theme (style.css):

@media (max-width: 800px) {
	#page {
		min-width: 500px;
	}
	#main #content {
		margin: 0 23.8% 0 1%;
		width: 76.2%
	}
	#main #secondary {
		float: right;
		margin: 0 1% 0 1%;
		width: 18.8%;
	}
}

And the sidebar is again a sidebar and not a “below bar” anymore !