Where is this code located?

Hi,

thanks for your post, and sorry for the trouble.

I’m not exactly sure, but it appears that the CSS that changes the font and color of these symbols is in some “Custom CSS” text area of the Elementor editor for this particular page.

Regards,
Tobias

Thank you. I couldn’t find it there.

If I want to use such Green and Red colored tick boxes, how to do it in Tablepress?

Hi,

essentially, you will need HTML code like

<div class="symbol-green">?</div>

or

<div class="symbol-red">?</div>

to show the symbols in the table cells.

To color these, you could tpcssadd this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.symbol-green {
    font-size: 20px;
    color: green;
    font-weight: bolder;
}
.symbol-red {
    font-size: 20px;
    color: #DC143C;
    font-weight: bolder;
}

Regards,
Tobias

Thank you very much. It worked.

How can I adjust the size of colums?

Like this table (https://ibb.co/PM9YbcS) where I want to reduce the size of the column.

Secondly, the green tickmarks change in not taking place on Mobile Device. Is there any code for it?

https://ibb.co/t84xwR1

Hi,

changing the column widths is possible with CSS code, see e.g. https://tablepress.org/faq/column-widths/

As for the color not working on mobiles: I assume that this is simply a caching issue, where your mobile is maybe not yet seeing the new CSS code. Maybe try in a private/incognito browsing tab, to be sure. The CSS code itself is fine and will work on mobile as well.

Regards,
Tobias

I am using this code:



@media screen and (max-width: 768px) {
.tablepress {
font-size: 16px;
}
}

.symbol-green {
font-size: 20px;
color: green;
font-weight: bolder;
}

.symbol-red {
font-size: 20px;
color: #DC143C;
font-weight: bolder;
}

.tablepress-id-1 .column-2 {
width: 400px;
}

.tablepress-id-1 .column-3 {
width: 10px;
}

.tablepress-id-1 .column-1 {
width: 10px;
}

For this table: https://ibb.co/ZGWkVSj

URL: https://innergpsgurus.com/energy-vortex-positive-signs-and-benefits/

I could change the width of the column. However,

1. I am unable to see the Green color tickmarks on mobile device. I cleared cache

2. I am unable to make the column data centre-aligned. How to do it?

Thank you.

Hi,

I can see the tickmarks on my phone without issues, so I’m not sure what’s going on for you… ??

To center align them, add

text-align: center;

to the .symbol-green CSS code.

Regards,
Tobias