Responsive issue


#1

Hi,

I have created a table on top of all my review pages to displays pros and cons as well as global rating.
But it looks like the table is not responsive on mobile.

How can I have this responsive?

Here’s the blog: http://top-recommandations.xavier-vauluisant.com/

Thanks for your help.

Best Regards,

Xavier


#2

Hi Xavier,

As I can see your table is responsive, but issue is caused with stars inside right tables because they are div elements and will maintain width. You should be able to overcome this by changing td element to block on screens below 768px. Use custom css code below for that purpose:

@media screen and (max-width: 768px) {
    table.yasr_table_multi_set_shortcode td {
        display: block;
    }
}

You can apply the code with some css plugin or if you are using WP 4.7 from Appereance > Customize > Custom CSS. result should look like this http://screencast.com/t/aWrYm1Y5TRJ

Best Regards!