Columns are Different Sizes

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

Problem:

Setup HTML table column width.

Solution:

It is a CSS issue, see example codes here:

https://toolset.com/forums/topic/columns-are-different-sizes/#post-2301735

Relevant Documentation:

This support ticket is created 3 years, 11 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: Asia/Hong_Kong (GMT+08:00)

This topic contains 2 replies, has 2 voices.

Last updated by melissaC-8 3 years, 11 months ago.

Assisted by: Luo Yang.

Author

Posts

February 23, 2022 at 9:35 pm #2301429

melissaC-8

I have three-column feeds on my website that aren't displaying consistently. Each column is a different width, and the images aren't aligning at the top.

The images are all exactly the same size and the content in each column is consistent, so in theory, the columns should be the same sizes.

Here's an example: hidden link

I've tried to use CSS to set column sizes, but nothing I tried worked.

February 24, 2022 at 8:01 am #2301735

Luo Yang

It is a CSS issue, I have done below modifications in your website:
Edit the post view "Category Feed (with search)":
hidden link
1) In section "Loop Editor", line 4, add CSS class name "my-table" to HTML table tag
2) Click "CSS Editor", add below CSS codes:

table.my-table td{
 	width: 33%;
}

Please test again, check if it is fixed, more help:
hidden link

February 24, 2022 at 2:39 pm #2302141

melissaC-8

Thank you. This fixed part of the problem. I also needed to add

float: left;

to make all the content align correctly.