[Resolved] How to set the image inside a grid to expand to the grid-half fully?

[Sascha]

Hi

I need to replace this landingpage (built with thrive architect) to this site (build with GP & GB).

Below the section with “Buche jetzt dein Beratungsgespräch!” I have tried to replicate the 2-col-grid, but fail to expand the image so that it is also fully streched between the middle and the right border, as seen as on the original-site.

I have tried to add an image block inside the column, and alternatively added the image as a background inside the container, but nothing brings the required result.

Could you please help with some guidance about how to accomplish this?

Thank you in advance and kind regards,
Sascha

[Sascha]

I have now solved the issue with the alignment of the image to the right border 🙂 Actually the block-editor did not strech the image to the border, bot on the frontend it looks ok now.

Now the issue left: How to make the image square?

Thank you in advance and kind regards,
Sascha

[Ying]

Hi Sascha,

Just to make sure that you want to make this image square?
https://www.screencast.com/t/GsabkulaRrn

This is a static image, you can crop it to square in the media library.
https://www.wpbeginner.com/beginners-guide/how-to-crop-rotate-scale-and-flip-images-in-wordpress/

[Sascha]

Just to make sure that you want to make this image square?

Exactly, and all 2 images in the sections below …

… you can crop it to square in the media library.

Well, I’m looking for a different way, because on mobile we need the image to be displayed as a rectangle. Please compare both the source and the dev-site in both desktop and mobile view again to understand what I mean, thanks🙏

[David]

Hi there,

1. Select the Container Blocks ( containing the Grids ). And remove the Padding. This will remove the vertical gap between the two rows.
1.1 Note you may want to add some Padding to the Grid Column container with the text.

2. Select the Grid Blocks ( thats the parent block not the individual Column Containers ) and set the Horizontal gap to 0
https://docs.generateblocks.com/article/grid-overview/#horizontal-gap

3. Image Blocks are not going to fill the space of the column when resizing the browser. So don’t use them. Instead select the image column, and first set the spacing Minimum height your require, and then add the Image as the Container Background.

4. On mobile you will need to re-order the columns – you can change the Column order in Mobile views of any Column Container:

https://docs.generateblocks.com/article/container-overview/#order

The simplest method, for your first row is to select the Image column container and set its order to -1 ( thats minus one ) and this will make it the first item on mobile.

[Sascha]

Excellent, thanks!

For mobile view, the images should not be squared but rectangle, so that the height is only 70% and width is 100% (or if px than something like 150×280 to give an example).

How can I achieve this?

[David]

When you set the Minimum height of the image column Container, switch to the Mobile tab and adjust the minimum height to suit.

As a note – an alternative way of setting the height is to NOT use the minimum height and instead set the Top Padding.
So on mobile you could set the min height to 0 and then set the Top Padding as a % that matches the aspect ratio of your image.

Aspect ratio of image is the original image – Width / Height * 100.
Add as the % top padding to keep aspect ratio.

[Author]

Posts