Twenty Thirteen sidebar issue with iPad

Is this issue specific to a browser?

Apparently not. It looks the same in both Safari and Chrome, the two most popular iPad browsers. This is a 3rd generation iPad, if that makes a difference.

Still working on this, but I did a quick test adding the parameter

-webkit-min-device-pixel-ratio: 2

to the media query, and that seemed to make a difference. There is something going on with the retina display that is not being addressed with the Twenty Thirteen theme.

I would appreciate any insights that anyone may have.

Still looking for an answer on this one. I moved all the styles in the 950px media query to the 767 media query. That gave me the widget column on the right in landscape but also in portrait. If I move the break point to 768, the right column goes to the bottom in landscape.

I still can’t emulate the issue. You should create a Child Theme and dequeue your theme’s style.css file and enqueue one with your modifications.

Then you can also write your own media queries to target device widths like landscape but not portrait: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Andrew, I have already tried your above suggestions without success, but I’ll keep trying. You state that you can’t emulate the issue. That was my problem from the beginning. Emulating the iPad in a browser always produced correct and consistent results. It was only when I looked at an actual iPad that I discovered a difference between the emulation and the actual iPad. The results were the same on both retina and non-retina screens.

I made a child theme of twentythirteen, whose only content was an iPad landscape specific media query. This solved the issue. The main issue was the class .site-main .sidebar-container. I had to change positioning back to absolute and give it a left position. For some reason, the iPad in landscape mode is reading the media query @media (max-width: 950px) in the twentythirteen theme. I still don’t understand why.

For anyone interested, here is the media query and CSS I used:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

	.sidebar .entry-header,
	.sidebar .entry-content,
	.sidebar .entry-summary,
	.sidebar .entry-meta,
	.sidebar .comment-list,
	.sidebar .comment-reply-title,
	.sidebar .comment-navigation,
	.sidebar .comment-respond .comment-form,
	.sidebar .featured-gallery,
	.sidebar .post-navigation .nav-links,
	.author.sidebar .author-info {
	max-width: 1040px;
	padding-top: 0;
	padding-right: 346px;
	padding-bottom: 0;
	padding-left: 20px;
	}

	.site-main .sidebar-container {
	height: 0;
	position: absolute;
	top: 40px;
	width: 100%;
	z-index: 1;
	left: 150px;
	}

	.site-main .widget-area {
	float: right;
	width: 300px;
	margin-right: 0px !important;
	}

	.sidebar .site-footer .widget-area {
		max-width: 724px;
		position: relative;
		left: -158px;
	}

}

As an aside, I found it very difficult to debug an iPad screen without using an emulated screen in a browser. Any advice about how to do this in a better way would be appreciated.

I’ve just encountered similar problems with my iPhone 6 Plus.

I’ve been modifying the CSS of TwentyThirteen via the JetPack ‘Edit CSS’ feature and after I got it all looking sweet on my desktop, I turned my attention to the iPhone.

Rather oddly, I thought, the images come out at less than half the width of the screen in portrait and landscape orientation. And it looks like the only reason anything else is wider is because of my (as yet) un-responsive modifications to widths.

I figured out the body is reporting 414 *pixels* wide, whereas the iPhone screen is 414 *points* wide @3x. The actual width in pixels is 1080 in portrait. I did a fairly accurate physical measurement of image width versus screen width with a ruler and the ratio is about 0.38. Coincidentally, 414/1080 is around the same value.

If I am understanding this correctly, the phone must be reporting a 414 pixel wide screen but rendering as for a 1080 pixel screen. (There’s more to it than that with the built in scaler from true @3x, but I think the concept suffices here without that.)

I wonder, then, if the issue is somehow in the use of the pixel-ratio media query. But at this point I am getting out of my depth! I would appreciate someone with a bit more understanding of how all this fits together could mull over what I’ve found.

Oh, and Mike, the way to debug an iPad (or iPhone) render is to do it on the device! On the device, in Settings > Safari > Advanced turn on Web Inspector. There are instructions there on how to do the inspection from desktop Safari with the device plugged in to the computer. I tried it on my Mac just now and it was pretty neat. You get the usual inspector window on the computer and as you run your mouse over the code blocks, the blue/green/orange boxes appear on the device. It’s pretty neat!

Thank you for posting the solution Mike. Just added the CSS you provided to my child theme and the issue is resolved. I’ve been super stumped with this.