Hi,
thanks for your question, and sorry for the trouble.
Responsiveness for tables is in general a tricky question, as there’s no fixed or designated behavior for tables on small devices.
The question is: What do you want the table to do on small devices?
Reducing the font size is an option, and that should be possible with some CSS code in a CSS3 Media Query. Now, I can’t find any code like that in the “Custom CSS” on your site, so I’m not sure why it was not working. Can you post the code that you tried?
Another idea, that usually works for tables with data in them, is to flip the table to the side and make it scrollable. That would be possible with the TablePress Extension from http://tablepress.org/extensions/responsive-tables/
Regards,
Tobias
Hi Tobias,
Thank you for your response! I added the following code under the CSS on my website. I also tried adding it under the Plugin options but it gets deleted:
@media (max-width: 767px) {
.tablepress tbody td div p {
font-size: .8em !important;
}
I also added extension you suggested (responsive-tables)and changed the shortcode to [table id=8 responsive=”all” /] but It doesn’t seem to work 🙁
Hi,
there’s a closing } missing in that CSS, and you’ll need to change the selector slightly. Please try again (in the “Plugin Options”) with
@media (max-width: 767px) {
.tablepress tbody td {
font-size: 0.8em !important;
}
}
For the Responsive Tables Extension: Don’t forget that you have to activate the plugin first and then also change the Shortcode, as described in my link above!
Regards,
Tobias
Hi Tobias! Thank you for your quick response. I added the closing and it seems to be working fine now.
I would like to use the responsive-table extension because if I add more packages it’s going to be hard to read with such small fonts.
I activated the extension correctly now and added the shortcode, but it messes my page up. I don’t have it activated now, but I was wondering if it could be because I have the table inside of another plugin.
I have another question, but I’m not sure if I should post it in a different thread:
I wanted to add a discounted price next to the old price on the same cell and same line. I added a code for the discounted price to be red and with a line across. This is the code I added to the plugin options:
.tablepress .pricing {
color: #CE0914;
text-decoration: line-through;
}
and the following code in the cell:
<div class=”pricing”> 2000€ </div> 1500€
They display one on top of the other. Do you know if I could have both prices on the same line?
Thank you so much!
Hi,
good to hear that the CSS works! 🙂
For the Responsive Tables Extension: Can you please activate that again and also change the Shortcode of the table, so that I can see how this messes up your site? I don’t really have an explanation for that, but would like to investigate it.
Regarding the problem with the positioning of the price: This should be as easy as changing the div to span HTML tags:
<span class="pricing"> 2000€ </span> 1500€
Regards,
Tobias
Hi Tobias!
Thank you so much for your responses! I activated it again and it doesn’t exactly messes up my site, but the first 2 rows (which are now the first 2 columns) don’t adjust well. I think it’s because it´s a h2 and h3. Let me know if you have any idea of why this could happen. Thank you!!
Hi,
thanks for re-activating it! Yes, the problem here is (to some degree the h2 and h3. It’s however more the white space around the other HTML in those cells.
I suggest to change the cell content there to exactly
<em><h2>Essential</h2></em>
After that, we’ll have to set the height of the cells correctly.
If you want to stay with “desktop” as the value, please try adding this to the “Custom CSS”:
@media (max-width: 1199px) {
.tablepress-id-8 th,
.tablepress-id-8 td {
height: 60px;
}
}
Regards,
Tobias
