CMS and responsive grid

[angie (Angie M)]

Hi there,

I am working with responsive grid to create my portfolio page and I’m having trouble placing the image in the centre, inside the grid.

All the images are focused in the left side of images in the grids and I want its focal point to be in the center of the picture. Or I want the grid to show the whole picture not a part of picture.

So my question is how do I resize and make different focal point of the image in the grid?

How can I maintain the focal point to the centre of image in the grid, when shrinking the grid for smaller devices?

Also how come the image overlaps from the page in the mobile settings?

I have attached a few images to support my questions.

My read only link is:
https://preview.webflow.com/preview/my-first-project-23bec9?utm_medium=preview_link&utm_source=designer&utm_content=my-first-project-23bec9&preview=d91f0603c508124003e258b5023c419b&pageId=5f87f5e137ba030c04c14def&mode=preview

and I am working on my “Design” page.

Any advice would be greatly appreciated!

Thank you

Angie

Here is my site Read-Only: LINK
(how to share your site Read-Only link)