[Support request] Grid items alignment

[Chintan]

Hi

I have created a grid with three containers, and each of them has an image and headline element. The headline and the images are not aligning horizontally. Can you please tell me how I can achieve proper alignment? Thank you!

[David]

Hi there,

you can use either:

a. the Grid Alignment:

https://docs.generateblocks.com/article/grid-overview/#vertical-alignment

b. the Container alignment:

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

[Chintan]

Hi David,

I have tried various permutations of both of these options, but I just can’t manage to get all of the images at the same size and their title elements aligned — without pixelating the images. Right now, you can see the website with pixelated images. How I have achieved this is by putting the images at 100% width and choosing a height of 290. Any less height is causing a distorted image. Can you please tell me where I am going wrong?

[Ying]

Your image size is 490px * 300px, to avoid getting pixelated, it’s better to edit the image itself to make it the exact size that you will use on your website.
https://www.screencast.com/t/HfTG3peP

[Chintan]

Hi Ying,

Those are not the images I’m referring to. Added a screenshot now.

[David]

How are those images created ?

[Chintan]

They are illustrations created by a designer. I think the designer used Photoshop if that’s what you mean to ask?

[David]

Yep, so in that case the designer should be able to provide you with:

a. All images of the same aspect ratio eg. a square image.
b. All images at a minimum resolution, i would suggest a minimum of 768px

So if was creating those images, i would start with a square canvas eg. 1200px x 1200px ( or whatever maximum size u may use them for ) which is the same for all images, and make my image fit that space. Then Export the image at the size you need for your webpage

This way you DO NOT mess with the width / height settings on the Image Block and then there won’t be the distortion or pixelation you see.

[Chintan]

Wow, thank you for the detailed response, David. I got it and on it with the designer!

[David]

You’re welcome

[Author]

Posts