A Few Issues with Grid Layouts

Hi @andre1990

Thanks for reaching us out, I hope you are doing great.

Kindly note that the issues you specified are not related to our CoBlocks plugin, but to the Gutenberg page editor.

Regardless, I will make sure to help you out with your problems:

1) I cannot delete the 3rd column. I thought I needed 3, but I only needed two. Is there a way of doing this without having to re-do everything?

Answer 1: Unfortunately there is no option to delete a column from the column block. The best way would be recreation of a column block using 2 column layout as seen here:

Screenshot: https://i.imgur.com/cUYSDQy.png

Alternatively, you may use this CSS code in your Customizer to hide the column:

.wp-block-column:nth-child(2) {
    display: none;
}

You should replace the number to match the column that you want to hide, however this is just a temporary fix and if you have other column blocks then they would be affected as well unless the CSS selector is modified.

2) How can I ‘auto-width’ the columns so that they distribute evenly across the width? Currently, I’m doing it by eye which isn’t 100% accurate

Answer 2: The simple fix to this issue is clicking the Reset button in the column settings tab as seen here:

Screenshot: https://i.imgur.com/L7Gx4hn.png

Your columns would then even up and populate the space available.

3) How can I middle align the texts in columns 1 and 2. I clicked middle align but, as you can see, column 1 is still higher than column 2.

Answer 3: You can do this by selecting the Vertically Align Middle setting as seen below:

Screenshot: https://i.imgur.com/7edbyfD.png

It is important that the column block is selected rather than a paragraph or any other element. In case this does not work for you, this might be a Gutenberg bug.

Once again, note that we don’t maintain Gutenberg, but only CoBlocks that extends it.

Either way, I hope my suggestions will help you out.

Have a nice day,
Andrija

Thank you Andrija – although i am still finding it very clumsy to deal with!

Coblocks only exists within the Gutenberg editor right? Or are you suggesting there is another way to use Coblocks?

Here: https://imgur.com/a/mmGFG32 – I have a 4 column 2 row table.

I am struggling to fill the background colour of one of the cells completely, without it just highlighting the text or having a white space between the rows.I want to achieve something like this:

View post on imgur.com

Hey @andre1990,

Yes, the CoBlocks is an extension for the Gutenberg. That being said, it is not up to CoBlocks developers to fix the Gutenberg issues.

The issue on the image you provided looks like something that can be fixed with some custom CSS.

Can you please publish the changes and send me the link of the specific page, so I can look into it and suggest the necessary CSS code?

Best Regards,
Pavle

Thank you Pavle, the link is: https://thehairchronicle.com/2020/07/10/is-nizoral-really-the-best-dht-blocker-shampoo-out-there/

You may require the password “temporary” as the article isn’t finished.

I’m basically trying to have rows where the background of the final column for each grow is either green or red (success or failure).

Hello once again @andre1990,

I see, by checking the link provided I can guess that you want to apply changes to the following section from the screenshot below, correct?

Screenshot: https://i.imgur.com/tUakYA6.png

If this is the case, here is the CSS code you can apply to Customizer and reach the results expected:

To change the color of the last column to green you can use this code:

#penci-post-entry-inner > table > tbody > tr:nth-child(1) > td:nth-child(3) {
    background: #0f0;
}

To change the color of the last column to red, just edit the color value, like this:

#penci-post-entry-inner > table > tbody > tr:nth-child(1) > td:nth-child(3) {
    background: #f00;
}

The important part of this code is that it allows you to target individual rows, the number on this line should be changed to the row number you want to target:

tr:nth-child(1)

For instance, if you want to target the row #3 and set it to the green color you will use this code:

#penci-post-entry-inner > table > tbody > tr:nth-child(3) > td:nth-child(3) {
    background: #0f0;
}

This part of the code picks the column you want to target and it is set to 3 as you are targeting the last column. If you want to target column #1 you would change the number between the parentheses to 1:

td:nth-child(3)

Of course, you may adjust the background parameter values as you wish in case you need a different color shade.

Let me know if this works for you.

Have a nice day,
Andrija