Aligning images and rows in two column grid

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user was having a styling issues for the 2nd column in a two columns loop layout.

Solution:
The layout uses tables and the width of the row are calculated by the browser. To fix this, enforce 50% width for the table columns with this style:

.wpv-loop.js-wpv-loop>tbody>tr>td {
    width: 50%;
}

This support ticket is created 4 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

This topic contains 2 replies, has 2 voices.

Last updated by Lori Martin 4 years, 2 months ago.

Assisted by: Jamal.

Author

Posts

November 12, 2021 at 8:09 pm #2219627

Lori Martin

Tell us what you are trying to do?
Align the member images and ensure they are the same size when displayed. Each image has been added to be the same dimensions. The images are a field that we created. Right now the two columns get out of alignment - sometimes the images are larger on the left column and sometimes on the right column. This happens on all of the taxonomies we are displaying.

Is there any documentation that you are following?
Apart from what is provided with Toolset, there isn't anything else.

Is there a similar example that we can see?
Here is an example that seems to happen on the taxonomy pages we created. What's especially confusing is that is you change the browser size a few times or scroll down or... when one column has larger images that will switch to the other column.

Here are some example pages:

hidden link
hidden link

What is the link to your site?

This is our build site: hidden link

I think toolset is amazing and sure hope we can get this resolved because my clients are upset about this. Everything else is working great. I tried to figure this out but it's above my paygrade.

Thanks so much,
Lori

November 14, 2021 at 10:47 am #2220495

Jamal

Hello Lori and thank you for contacting the Toolset support.

Honestly, I could not find anything that could explain for sure what's the issue. I suspect that the issue comes from how the browser calculates the columns with of the table that serves the loop.

By playing in the browser console, I was able to fix the issue by adding the following CSS rule:

.wpv-loop.js-wpv-loop>tbody>tr>td {
    width: 50%;
}

Can you try adding it to the archive's CSS section and check if it fixes the issue?

November 15, 2021 at 5:08 pm #2221585

Lori Martin

My issue is resolved now. Thank you!