Problem sizing thumbnail images in Advanced Columns block

[Doug]

I have 4 images in an advanced column row with an image in each of 4 columns. The images are roughly the same size, but not identical, and I thought the advanced column would adjust to give them equal heights, thus aligning at the top and bottom, but having different widths.

That's happening with 3 of them, but 1 of them won't align with the other 3 along the bottom when viewed in desktop and in thumbnail mode.

When I tried to edit and drag the bottom of the image, it distorted the image vertically wildly, per the screen grabs linked here:

Page view
Page edit view

I haven't been able to successfully drag the image to resize it with the other images, and after looking at the block and using Inspect, I'm not able to tell what's going on.

Any direction on how to troubleshoot this issue would be greatly appreciated.

Info on the 4 images:

Problem image:
File name: pulseUX-chart-timelines-03.png
File type: image/png
File size: 307 KB
Dimensions: 2156 by 1569 pixels

Other images:
File name: pulseUX-activitybydaypart-02.png
File type: image/png
File size: 422 KB
Dimensions: 798 by 459 pixels

File name: pulseUX-chart-topauthors.png
File type: image/png
File size: 512 KB
Dimensions: 2258 by 1330 pixels

File name: pulseUX-chart-posttopics.png
File type: image/png
File size: 2 MB
Dimensions: 2198 by 1310 pixels

https://dougschumacher.com/uxing/

[henkjankrijgerweb]

I noticed that when creating a gallery block, with the 3 default columns, the images used as thumbnails on the front end are the original, full size version. Not the thumbnail, not medium, not even large size version. There is the srcset attribute but that does not help much because 100vw is set so it will generally only affect screen sizes smaller than the Large or Medium sizes set on WordPress Settings > Media.

Let's take for a theme that uses a maximum content width of 700px. On Settings > Media the sizes Thumbnail 150px - Medium 300px - Large 1024px are set.

Images in the Media Library are all 1600px wide. Now take a gallery with three columns, which will have a source code like this for each image: read more click here

[sakarletjohn]

I also need information on this topic. I like your blog it's informative to read like Tyler the Creator merchandise blogs.

[JoziahLachlan]

To resize an image, click it to reveal the resize handles that look like blue dots around the image. Then, click on a resize handle and drag the image to your desired size. Alternatively, you can adjust the width and height dimensions in the block settings on the right-hand side.

[Author]

Posts