What's causing these image sizes to be wrong?

Question

I cannot work out why some of the images on this page are wrongly sized (2 of them appear smaller than the others).

https://www.violinschool.org/video-testing/

I have re-cropped them all to the same size (355x200, ratio 16:9) so there must be something else causing it.

Am trying to check the html and CSS (it's a wordpress site using Toolset Types) to see what might be wrong, but to no avail.

Answer 1

Try adding this line to your CSS file and see if it helps:

table.wpv-loop.js-wpv-loop td {
    width: 25%;
}

Answer 2

As <td> in table are not fixed width they get the width according to the content inside it untill the width is not defined in css.

You can do it with 2 solutions.

First is Add table-layout:fixed in table.

table{
    border-bottom: 1px solid #ededed;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    line-height: 2;
    margin: 0 0 20px;
    width: 100%;
    table-layout: fixed;
}

Adding table-layout:fixed will restrict the table to show each cell with same width.

and second Use width in <td>

As you are using exact 4 <td> in one row so you can give width manually width:25%.

td {
    border-top: 1px solid #ededed;
    padding: 6px 10px 6px 0;
    width: 25%;
}