Hi,
thanks for your post, and sorry for the trouble.
First, I don’t recommend that the width is set on the .tablepress CSS class. This would affect all tables on your site, not just this one! Instead, use .tablepress-id-32 (with the correct ID).
To set a different width on small screens, you can use a CSS media query:
@media screen and (max-width: 768px) {
.tablepress-id-32 {
width: 500px;
}
}
Regards,
Tobias
Thanks for the response, but you don’t seem to understand what am saying. Let me be straightforward, I want to set the width for desktop to 700px and that of mobile to 300px for all tables. Is this achievable?
Hi,
that’s exactly what the code example would be doing. If you really want this for all tables on the site, use
.tablepress {
width: 700px;
}
@media screen and (max-width: 768px) {
.tablepress {
width: 300px;
}
}
Of course, the table will only be 300px wide on mobiles if the content in the table allows this, i.e. if there are no long words in it that require the columns to be wider, for example.
Regards,
Tobias
