YITH Compare: "vertical-align: top;" and default theme font

Hello,

I put this code in Theme Settings > Custom CSS, but it doesn’t change how table text is displayed. It is still vertically aligned middle.

Also I asked you how is it possible to make that all texts in YITH Compare would be displayed in default theme font? Because now some texts are displayed in theme font and some texts (for example, prices) are displayed in some other font (I suppose that’s YITH default font).

Please advise.

Thank you!

Hello,

your code don’t do the same for me. See the screenshot from DevTools in private content, how this align-top is denied. And you will see uncaught Typerror there, maybe it explains why the code don’t work.

By the way, I applied quite similar code to change the font in YITH Compare:

.compare-list tbody th,
.compare-list tbody tr,
.compare-list tbody td {
font-family: Alegreya, serif;
}

It worked. So I don’t know why your code don’t work for vertical-align: top.

Will wait for your answer.

Thank you.

Hello,

see it in private content.

Thank you!

Hello,

thanks for having a look.
But this new code only partially solved the issue.
The title of the description now is in “vertical-align:top;”. This is great.

But the description texts are still in “vertical-align:middle;”. If you put two or three descriptions of different lenght it’s clear that they are aligned vertically middle.

So I tried to modify your code and then mentioned that .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td {vertical-align: middle;} denies the “vertical-align:top;” of table.dataTable.compare-list code. See the screenshot of this in private content.

To be precise I mentioned this in DevTools when I slightly modified your code in this way:

body table.dataTable.compare-list tbody th {
vertical-align: top;
}

body table.dataTable.compare-list tbody tr {
vertical-align: top;
}

body table.dataTable.compare-list tbody td {
vertical-align: top;
}

body table.dataTable.compare-list tbody td p {
vertical-align: top;
}

I understand that this modified code isn’t great, but it seems that it may help to figure out how it is possible to have “vertical-align:top;” of table.dataTable.compare-list tbody td.

Please have a look again. Thank you for taking care!

Hello Elise,

now everything is fine. Thank you!

!important rules 🙂