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

Hello,

by default in YITH Compare’s table the title of description and the description texts are set to “vertical-align: middle;”. But when the length of description texts varies, everything looks not so good (because the shorter description have some blank space above). See the screenshot in private content.

How is it possible to change set there “vertical-align: middle;” to “vertical-align: top;”?

Also some texts in the table rows (for exampe, the price) doesn’t inherit default theme font and have different font. How is it possible to make that all texts in YITH Compare would be displayed in default theme font?

Best regards.

Hello,

The table the title element does not have a class http://prntscr.com/ktgzvj if we change the style it will be applied to all the tables.

.compare-list tbody th,
.compare-list tbody td,
.compare-list tbody td p{
vertical-align: top;
}

Add this code to the Theme Settings > Custom CSS.

This functionality relates to the third party plugin that is why our theme styles do not influence.

Best Regards

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,

Add the above code and check again. I am testing and:

Here is the default vertical-align: middle http://prntscr.com/ktpffi

And this is vertical-align: top http://prntscr.com/ktpfsj

Best Regards

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,

Please provide your site admin access.

Best Regards

Hello,

see it in private content.

Thank you!

Hello,

Please try this code:

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

Best Regards

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,

Your issue has been solved: vertical-align: top!important; If you have any questions please feel free to contact us.

Best Regards

Hello Elise,

now everything is fine. Thank you!

!important rules 🙂

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts