How to adjust image size inside of gallery block

Hi @thunder_god
In the Gutenberg editor, you can resize images using the Image block. To do this, follow these steps:

1. Insert an Image block into your post or page.
2. Click on the image to select it. You should see a toolbar appear above the image.
3. Click on the “Resize” button in the toolbar. This will display the resize handles around the image.
4. Click and drag one of the resize handles to resize the image. You can also use the “Width” and “Height” fields in the block settings on the right-hand side of the screen to input specific dimensions for the image.

If you want to insert multiple images side by side, you can use the Columns block. To use the Columns block, follow these steps:

1. Insert a Columns block into your post or page.
2. Click on the plus (+) icon in one of the columns to add a new block.
3. Insert an Image block into the column.
4. Repeat the steps above to insert additional images into the other columns.

Note that the Columns block does not have handles for resizing the individual images. To resize the photos, you need to use the Image block described above.

When I use the column block and add the image block inside of the columns block and I try to use the handles to resize there is a big huge gap in the middle of the two columns. I didn’t have this problem before when using the classic editor but now it won’t let me close the gap between the two columns.

Hi @thunder_god
The gap between the columns in the Columns block is called the gutter. By default, the gutter is set to a certain width to give the columns some space between them. However, you can adjust the gutter width to make it smaller or larger as needed.

To adjust the gutter width in the Columns block, follow these steps:

1. Click on the Columns block to select it.

2. In the block settings on the right-hand side of the screen, you will see a “Gutter Width” option.

3. Use the slider or the input field to adjust the gutter width. By clicking on the buttons, you can also use the predefined gutter widths (small, medium, large).
Note that the gutter width is applied to all columns in the block so that all columns will have the same amount of space between them.

If you want to have more control over the spacing between the columns, you can use the Spacer block to add space between the columns. To use the Spacer block, follow these steps:

1. Insert a Spacer block between the two columns.

2. Use the “Space” field in the block settings to adjust the amount of space you want to add between the columns.

This will allow you to add specific amounts of space between the columns rather than using the gutter width, which is applied to all columns in the block.

I don’t see a columns width adjustment option when I select the whole column just an option to put how many columns are in the block, however when I select each individual column there is an option to adjust the width by PX, %, EM, REM, VW. Is that what you’re referring to? I also don’t see buttons to adjust the width like you mentioned under the individual columns though.

Hi @thunder_god
Yes, you can use the Width option in the block settings to adjust the width of each column individually. To do this, follow these steps:

1. Select a column in the Columns block.

2. In the block settings on the right-hand side of the screen, you will find the Width option.

3. Use the slider or the input field to adjust the width of the column. By clicking on the buttons, you can also use the predefined widths (25%, 33%, 50%, 66%, 75%, 100%).

Note that the width of the columns is specified as a percentage of the total width of the Columns block, so the total width of all columns in the block should add up to 100%. If you adjust the width of one column, the width of the other columns will be automatically adjusted to maintain the total width of 100%.

The Width option in the block settings allows you to customize the width of the column using different units, such as pixels (px), percent (%), ems (em), rems (rem), and viewport widths (vw). You can select the unit you want to use by clicking on the dropdown menu next to the input field.

You may have selected the wrong block if you don’t see the Width option in the block settings. Make sure you have selected a column in the Columns block, not the Columns block itself. The Columns block itself does not have a Width option, but each individual column in the block does.