CSS Table alignment issues

[velvet gyro]

Copied from #general message as I wasn't replied.

One problem I have is the following:

I want to fit my Discord an Featured Articles headers in my Main Page. The problem is that it doesn't look that good when I zoom out and there is a big blank space there.

The first image is when I used 33% and 33% for each box and I was left with this space.

The second one is when I used 50% and 50%, which should've filled the space. Though it just filled part of it, the discord widget wasn't centered and the above "DId you know" box was squished into 10%-15% of the space.

I even made a third image, with 40% each this time. The problem is the same

The intended result was the last row occuping 100% of the space, with the Discord and Featured Articles boxes being the same size

[high rose]

is this about what you want to achieve?

[velvet gyro]

yes

lets goo

🔥🔥⭐⭐👍👍

sorry

[high rose]

I modified the colspan values so there are a total of 4 cols in the table, then the bottom ones can both be 2 cols wide

[velvet gyro]

then how do I apply this?

[high rose]

by changing the colspan values to the ones I annotated in the screenshot

[velvet gyro]

is it a html tag?

[high rose]

nope, it's an attribute which you can specify for a table row (which is already done for some rows in your main page), see https://www.mediawiki.org/wiki/Help:Tables#HTML_colspan_and_rowspan for more info

[velvet gyro]

probably gonna consult my css guy in our wiki

ty

[high rose]

it's html, not css (though you can do the same thing with css as well)