Table width on ipad

Resolved

(@pbwpwork)

Hi Tobias,

Just a little question about viewing my table on ipad (landscape). 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;
}

As you can see, it looks pretty good on all devices, apart from on Landscape ipad where the table seems to be a bit wide for the grey section. If you notice the blue box that says: ‘Beef & Onion’, seems to be bleeding out onto the white.

In:

@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;
	}

}

I have tried to force the table to narrow when it is display on Ipad (Landscape) but it does not take effect (even my change of background colour does not work).

Can you please advise?

Cheers,

Paul

(p.s. I Love Your Plugin)

This topic was modified 7 years, 5 months ago by pbwpwork.
This topic was modified 7 years, 5 months ago by pbwpwork.

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

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

7 years, 5 months ago

Hi,

thanks for your post, and sorry for the trouble.

Sorry, but I have no real idea why this happens on the iPad. Your CSS code looks fine to me.

Regards,
Tobias
Thread Starter pbwpwork
(@pbwpwork)

7 years, 5 months ago
Hi Tobias,

I actually fixed that problem (by reducing the text size in the table for ipad user) and it now looks great! The only problem is that I have lost the ability to stack my table (on the mobile – using your Responsive Tables plugin). I am trying it on a completely new table just to be sure that I have no crossovers in terms of plugins.

So the page is:

http://barnyzpimpmypie.freesite.host/?page_id=134

the code on the page is:
[table id=7 responsive=flip responsive_breakpoint=phone /]

And my CSS is:
```
@media (max-width: 767px) {

	.tablepress-id-7-responsive-phone thead {
		position: relative !important;
		overflow: auto !important;
		clip: auto !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
	}

}
```
The last time I did this (on the mobile) I had all 4 pictures neatly stacked one on top of one each other. But now I can’t seem to get the stacked effect – it is now scrolling. Can you tell me where I have gone wrong?

Cheers,

Paul
Plugin Author Tobias Bäthge
(@tobiasbg)

7 years, 5 months ago
Hi,

you probably had the stack effect by “accidentally” turning on “Horizontal Scrolling” on the table’s “Edit” screen.

For this table, I would recommend NOT using the flip mode, but just some CSS:
```
@media (max-width: 767px) {
	.tablepress-id-7 tbody td {
		display: block;
	}
}
```
Regards,
Tobias

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Table width on ipad’ is closed to new replies.

Tags