Error causing code not to render on Ipads

*Please note: I have already put this question direct to the plugin’s (Tablepress) author and he does not know the answer. I think it may lie in the CSS rather than the plugin*

Hi,

I am trying to develop some CSS coding to customise the look for a table in TablePress, and I’m have difficult in getting it to render perfectly across all devices. It work on everything but the IPad in landscape mode.

Here is the full code:

@media (max-width: 768px) {

	.tablepress-id-2 th {
	}

	.tablepress-id-2 .row-1 .column-2 {
		vertical-align: middle;
		text-align: center;
	}

	.tablepress-id-2 td {
		font-size: 10px;
		line-height: 13px;
	}

	.tablepress-id-2 img {
		min-width: 50px;
		max-width: 100%;
		vertical-align: middle;
	}

}

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

	table.tablepress-id-2 {
		width: 400px;
		margin: 0 auto 1em;
	}

	.tablepress-id-2 .row-1 .column-1 {
		background-color: #33FFB2;
	}

}

.tablepress-id-2 .row-1 .column-2 {
	vertical-align: middle;
	text-align: center;
}

.tablepress-id-2 .row-1 .column-1 {
	background-color: #05affd;
}

.tablepress-id-2 .row-3 .column-2 {
	background-color: #05affd;
}

The part of the code that is not working properly is the CSS for ‘Iad – Landscape’ only:

‘@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {

table.tablepress-id-2 {
width: 400px;
margin: 0 auto 1em;
}

.tablepress-id-2 .row-1 .column-1 {
background-color: #33FFB2;
}

}
‘
The problem is that neither of these two statements work (I only did the background-color as a check). I am told that this is the correct way to write code which you only want to render when displayed on a Ipad (in landscape mode). If you look at the page in this Ipad mode you will notice that the blue box that says: ‘Beef & Onion’, seems to be bleeding out onto the white.

Does anyone know why it is doing this? Is there any other way to write the script so that it only renders on a Ipad (in landscape mode)?

As I said at the start I have contact Tobias at Tablepress, and he does not know why it is not working, so I thought I would open it up as a general CSS query.

(My theme is Leaway, could that be making a difference?)

Many Thanks,

Paul

The page I need help with: [log in to see the link]