Hi,
thanks for your question, and sorry for the trouble.
In your case, you could tell the browser to shrink the images on a small screen, e.g. with “Custom CSS”. For that, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress-id-3 img {
max-width: 100%;
}
For other approaches, you could take a look at https://tablepress.org/extensions/responsive-tables/
Regards,
Tobias
Hi Tobias,
Thanks, I did this and seems to have worked, only thing now is how do I central align the middle column as on desktop the middle column is left aligned.
Thanks,
Chris
Hi,
for that, you could e.g. use
@media screen and (max-width: 50em) {
.tablepress-id-3 .column-2 {
text-align: center;
}
}
Regards,
Tobias
Hi Tobias,
Thanks, strange that didn’t seem to work. The text is still left aligned Any ideas?
Thanks,
Chris
Hi Chris,
please try clearing that BWP Minify cache. Also, you seem to have changed the table ID to 1, although the table in your link above has the ID 3?
Regards,
Tobias
Hi Tobias,
I’m actually trying to center align table 1 now on the homepage
http://www.biggestfreebets.com/
2nd (free bet column)
Thanks,
Chris
Hi Chris,
make sure to also hard-refresh the page, so that the new BWP Minify CSS file is loaded.
For me, the second column of table 1 is now centered on small screen, but left-aligned on the desktop.
Regards,
Tobias
Hey Tobias,
Ahh I see, I actually want the text centered on desktop and small screen now. How’s that possible?
Appreciate your help on this
Currently I’ve got this for the four tables
.tablepress-id-3 img {
max-width: 100%;
}
.tablepress-id-1 img {
max-width: 100%;
}
.tablepress-id-4 img {
max-width: 100%;
}
.tablepress-id-5 img {
max-width: 100%;
}
@media screen and (max-width: 50em) {
.tablepress-id-1 .column-2 {
text-align: center;
}
}
@media screen and (max-width: 50em) {
.tablepress-id-3 .column-2 {
text-align: center;
}
}
@media screen and (max-width: 50em) {
.tablepress-id-5 .column-2 {
text-align: center;
}
}
@media screen and (max-width: 50em) {
.tablepress-id-4 .column-2 {
text-align: center;
}
}
Hi,
then simply remove that extra CSS3 Media Query part, i.e. use something like
.tablepress-id-4 .column-2 {
text-align: center;
}
only.
Regards,
Tobias
Awesome, thanks very much Tobias!
5***** from me!
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
