Tables too small/restricted on mobile

Hi, @openthebible!

I see that on your site the width of the tables is set to 40%, that is why they are so small on mobile even though there is enough space. Please try to insert the following code in the Additional CSS section within the Customizer.

@media(max-width: 520px){
.google-visualization-table {
    width: auto !important;
}
}

If you want the tables to occupy the entire width of the screen, feel free to set the width to 100%, instead of “auto”.

I hope this helps!

Have a nice day!

@luciamarinescu

Hi, if I enter the code with ‘auto’, then nothing changes.

But if I enter 100% or 100 (not sure which one it is), then all the colours from the table dissapear and I get this error:

Invalid JSON: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

One per line in valid JSON (key:value) format e.g.
{ “vAxis”: { “ticks”: [5, 10, 15, 20], “titleTextStyle”: { “color”: “red” }, “textPosition”: “in” } }

Can you just make some changes to our plugin so that all of our tables would be shown right? So that our writer wouldn’t need to do things like that.

Hello?

@luciamarinescu We have added the code but it doesn’t seem to be doing anything.

We played around with settings and now on some mobile phones it looks fine while for some it is still the same.

Now we changed the setting to 100%, so it looks good on mobile but is way too wide for the desktop version.

https://bit.ly/3wPU1RI

The interesting thing is that another page which has your tables has no issues like that. Maybe because those tables have more text?

https://bit.ly/3zxkuFv

Hi, @openthebible!

To keep the tables smaller in the desktop version, please insert the following code in the Additional CSS section within the Customizer.

@media(min-width: 520px){
.google-visualization-table {
    width: auto !important;
}
}

You can change “auto” with “unset” or with any value smaller than 100% until you achieve the style you want.

It looks like on this particular page were made some custom changes in the code. As I mentioned in my previous answer, the width of the tables on this page was set to 40%. This isn’t a default setting.

I hope this helps!

Thank you and have a nice day!

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

@luciamarinescu

Thanks a lot, we have seemed to fix it by leaving the size at 100% and using the unset option in this code.

Still not sure what has caused it, because other tables were always fine. Maybe because tables on this page are so narrow? We have never made any changes on our website regarding this, only by using your own settings.