Hi,
thanks for your question, and sorry for the trouble.
That table doesn’t actually use anything special, regarding responsiveness. All it does is assign a width of 50% (in relation to the column width) to the images.
Can you please post a link to the page with your table where this problem happens, so that I can take a direct look? Thanks!
Regards,
Tobias
Hi,
Thank you very much for your answer.
Here is the link of my table : http://www.detective-banque.fr/test-2/
Thank you in advance !
Hi,
thanks for the link!
For this table, you could first of all make things look a bit more uniform. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress .su-button {
white-space: nowrap;
padding: 6px 2px;
}
.tablepress .su-button-center + br {
display: none;
}
.tablepress th,
.tablepress td {
padding: 6px !important;
vertical-align: middle !important;
line-height: normal;
}
Then, to make it responsive, I recommend using the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/
Regards,
Tobias
Hi Tobias,
Thank you very much for your explanations.
I did add the css code you gave me, and it looks much better now !
I also added the scroll mode, it works, but I would like to have the same kind of responsive that they have here : http://www.capitaine-banque.com with assigning a width of 50% to the images maybe.
Would you know how to do so ?
Thanks a lot
Hi,
you could maybe try it with this CSS code. Just add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress-id-1 img {
max-width: 100%;
}
Regards,
Tobias
Hey,
Thank you for the code but it doesn’t work : http://mobiletest.me/htc_one_emulator/?u=http://www.detective-banque.fr/test-2/
The images desapear on small devices and still when they appear, it doesn’t look good : http://mobiletest.me/nokia_lumia_920_emulator/?u=http://www.detective-banque.fr/test-2/ with big buttons and small images…
Would you have any idea ?
Thanks !
Hi,
that’s the problem, there’s not enough space for bigger images. You would have to reduce the font size or the button padding.
You could for example use CSS3 Media Queries in the CSS:
@media (max-width: 768px) {
.tablepress-id-1 th,
.tablepress-id-1 td {
font-size: 10px;
}
.tablepress-id-1 .su-button,
.tablepress-id-1 .su-button span {
padding: 2px !important;
font-size: 12px !important;
}
}
Regards,
Tobias
Hi,
That’s much better now, thank you !
Still the images desapear on small devices. Would you have an idea to make them appear in small ?
Thank you !!
Hi,
you could try giving them a minimum width, by changing
.tablepress-id-1 img {
max-width: 100%;
}
to
.tablepress-id-1 img {
min-width: 50px;
max-width: 100%;
}
Regards,
Tobias
Hey,
I added the minimum width and it looks great now !
Thank you so much for your help and kindness !
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!
Hi,
thanks, I really appreciate it!
Best wishes,
Tobias
Hello Tobias,
Hope you’re doing great.
I contact you again because I’ve added another table on my website as you can see here (table 2) : http://www.detective-banque.fr/test-2/
You helped me the other time with my first table, in order to make it responsive and it worked just well.
For this second table, I tried to add the same css elements that you gave me to the CSS options of your plugin :
.tablepress-id-2 img {
max-width: 100%;
min-width: 50px;
}
@media (max-width: 768px) {
.tablepress-id-2 th,
.tablepress-id-2 td {
font-size: 10px;
}
.tablepress-id-2 .su-button,
.tablepress-id-2 .su-button span {
padding: 2px !important;
font-size: 12px !important;
}
}
But it doesn’t work, it makes the images with different sizes on my device (so I deleted it)…
Could you please tell me what code should I add to make my second table look great on desktop and mobile devices ?
Just so you know, I would like to add other tables which will look like the same than the second table. So maybe you could give me a code that I can change a bit on my own with my future tables ?
Thank you !
Regards
Hi,
the problem here is that this table has a completely different structure (basically, the information is laid out in columns, and not in rows as in the first table).
In general, the CSS
.tablepress-id-2 img {
max-width: 100%;
min-width: 50px;
}
@media (max-width: 768px) {
.tablepress-id-2 th,
.tablepress-id-2 td {
font-size: 10px;
}
.tablepress-id-2 .su-button,
.tablepress-id-2 .su-button span {
padding: 2px !important;
font-size: 12px !important;
}
}
should be a good start. In addition, you can add something like
.tablepress-id-2 th,
.tablepress-id-2 td {
width: 14.5%;
}
to give the columns an equal size.
(The 14.5% is calcuated as 100% divided by 7 columns.)
Regards,
Tobias
