Responsive

Hi,

thanks for your post, and sorry for the trouble.

Making tables responsive is a very tricky issue, due to their fixed structure. A common approach is flipping the table and adding horizontal scrolling, which is possible with this TablePress Extension: https://tablepress.org/extensions/responsive-tables/

Regards,
Tobias

Hi Tobias,

No problem at all, i just installed the extension and it works perfectly, thank you so much, ill rate your plugin now…

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!
And thanks for the review, I really appreciate it!

Best wishes,
Tobias

One question, i would just like to have responsive set to phone and tablet, what shortcode do i enter there?

Hi,

in that case, you would use tablet as the value. Larger screens basically always include the smaller screens.

Regards,
Tobias

Hi Tobias,

I have done as you have mentioned and it displays fine on iphone but not on ipad, here is a link so you can see for yourself -> https://staging4.reds.ie/year-planner-2/ can you please advise?

Thanks

Hi,

ok, your theme might need a different breakpoint for the reponsive layout to kick in.
Can you please try changing the line

@media (max-width: 979px) {

to

@media (max-width: 1024px) {

in both the tablepress-responsive.css and tablepress-responsive.min.css files?

Regards,
Tobias

That worked perfectly, thanks for the prompt reply…

Hi,

sure, you are welcome!

Best wishes,
Tobias

Hi, I have an issue on header tab about height.

https://mvno-hikaku.com/mvno-comparison-sheet/

As you can the height of each cell is not unified.
Are you still developing? or if you have any idea to make the layout cleaner please let me know of it.

Thank you

Hi,

thanks for your post, and sorry for the trouble.

The reason for this is that your cell heights are different, due to the content in them. To change this, you will have to add this to the “Custom CSS”:

@media (max-width: 1199px){
    .tablepress-id-3 th,
    .tablepress-id-3 td {
        height: 24px;
    }
    .tablepress-id-3 .column-1 {
        height: 96px;
    }
    .tablepress-id-3 .column-5 {
        height: 72px;
    }
    .tablepress-id-3 .column-6 {
        height: 48px;
    }
    .tablepress-id-3 .column-7 {
        height: 216px;
    }
}

Regards,
Tobias