how can I achieve this image?

Hi there,

If you want to add rounded corners and more space above and below the image, the use a GenerateBlocks Image block.

In the Spacing options of the image block you can add Top and Bottom Margin as well as set the Border Radius

What’s wrong with the image? Too small?

If so, it’s because the height is set to 250px, so the width is 166.66px to respect its aspect ratio, unless you also set a width value for it.

1. Select the container block which contains the image block, set display to default instead of flex.

2. Select the image block, set width to 100%, height to 300px.

Let me know if this helps!

Hi there,

You need to set the Object-fit of the Image block to cover.

You can then move the image position through a CSS like this:

img.gb-image-77f936f3 {
    object-position: center 70%;
}