Not responsive on Mobile even After enabling

Hello @jabranmessage,

Sorry to hear you are having trouble with responsive builder. We will investigate the issue and give you an update when we finished. In the meantime, if you can provide us a live url of the website where this table resides, it will help a lot in the investigation since there may be outside factors(theme, plugins) may be affecting the style and functionality of the table. Also exporting the table with import/export menu will also help.

Best regards.

Hi @erdembircan,

Thank you for replying.

Here is the live url: Table

Don’t forget to check the site on Mobile device only. Because the table work fine if you are using inspect element.

Let me know if you need any other things…

Thank you ??

Hello @jabranmessage,

Thank you for the information. We will check the website and give you an update when we completed our investigation.

Best regards.

Hello @jabranmessage,

After investigation we found that the issue is caused at your side by a CSS rule at your webpage. .tdi_4_62c CSS rule is setting the width of the container it is attached to 350px at screen widths lower than 768px. And because of this, even though there is still width space, your content is squished into 350px length and its layout is distorted. Unfortunately there is no parent pseudo selector or url selector for CSS to target that specific element where your table is located. Also since that rule is using !important tag to make its width property value to have a higher priority over any width rule that will affect it, using a custom CSS rule may not result same in different browsers. But if you want to experiment, you can try out the custom CSS code I shared below at your site. But know that it will affect every element in your web site which is using that CSS rule.

Here is a demonstration of before and after CSS rule is applied.
Before: https://ibb.co/TP5NZF0
After: https://ibb.co/yf9dmG8

CSS Code:

@media screen and (max-width: 767px){
    .tdi_4_62c{
        width: 100% !important;
    }
}

Best regards.

• This reply was modified 4 years, 4 months ago by erdembircan.

Hi @erdembircan

Thank you so much for investigating the issue and giving a solution.

I have applied the given CCS and it worked. Now the table is shrinking correctly and the elements are placed where it belong.

As you said, it might look different on other browsers that’s why I am now checking the site and different browsers to find it out any other difference that have caused after applying the CSS.

I don’t have words to use it and thank you for your Plugin and support.

Thank you,
and have a great day ahead ??

Hello @erdembircan ,

I have the same bug in all my /amp posts with tables (as https://multipantalla.net/mejores-monitores-27-pulgadas/amp/) and I’d like to fix it.
I added CSS code that you provided but it still does not work.
Could you please help me?
I look forward to hearing from you soon,

Thank you in advance,

Hector

Hello @hectorcl,

We will investigate the url you supplied and give you an update on the issue.

Best regards.

Hello @erdembircan ,

Do you have any news of how to fix the issue?

Kind Regards

Hector

Hello @hectorcl;

After our investigation, we found that your web site is not serving the CSS file that your tables depends on the front-end, wp-table-builder-frontend.css. And because of this, your tables are not looking as they should be. Please be sure plugin is installed completely, and there is no other plugin or custom code which is blocking serving of CSS files on your web page.

Best regards.

Hello @erdembircan ,

After some research I found that AMP plugin that I am using (AMPforWP) is not allowing me to make tables responsive. I’ve already posted my doubts in their support page (https://www.ads-software.com/support/topic/tables-not-responsive-with-wp-table-builder-plugin/) and maybe they can fix it.

Meanwhile, I’m testing in parallel the WP Table Builder plugin with the official AMP plugin in another website I own (https://www.todosmarts.com/los-mejores-monitores-4k-baratos/?amp) with the same tables. This plugin has recognized wp-table-builder-frontend.js issue and 3 more errors for amp version (jquery.js, jquery-migrate.min.js, WPTB_ResponsiveFrontend.js) and allows me to block them all. As a result, the page is compatible with AMP, the table design is improved but still does not look good.

As you can see, columns are narrow and the table is not responsive. So the buttons, star rating and text are tightened. Text should be clear and easy to read.

How could I fix these problems for AMP?

I would really appreciate it if you could help me,

Thank you in advance,

Hector

P.S: AMP official WP plugin has 3 modes to set AMP: native, paired and classic. I’m using Paired mode. More info here: https://amp-wp.org/documentation/developing-wordpress-amp-sites/how-to-develop-with-the-amp-plugin/ .

Hello @hectorcl;

We will further investigate this issue with AMP, it seems like they are blocking some of js and css related functionality. Will look into that and will give you an update on the situation.

Best regards.

Hello @erdembircan ,

Thank you very much for your time.
I look forward to hearing from you soon,

Hector

Hello @erdembircan
1st, Thank you very much for your time and this amazing plugin.

I faced responsive problem recently, he was working fine, I dont know if it is related to recent update of plugin or wordpress 5.5.3…

Please can you have look to this Link…

Best regards.

Hello @dnadjib,

Sorry to hear you are having this problem. We will investigate it and give you an update when finished.

Best regards.

Hello @dnadjib,

Seems like you are using WP-Optimize. As we checked the minified file this plugin is serving on your front-end, we couldn’t find the required class to enable responsive functionality. It seems like a cache issue with WP-Optimize because we checked the original file at your server and that file has that class. Looks like your server is providing an old cache of the plugin files. And since new update changed the way front-end files are handled, this provides an issue. With the new update, you don’t need to minify our plugin files because they are already minified. Please check your cache settings for WP-Optimize.

Best regards.