How do center element in a grid child?

I have a grid “whywf_component” that contains a content div “whywf_content” and an image wrapper div called “whywf_image-wrapper”. That wrapper contains an image “image-webpage-and-badge”. I’d like to center the image in the middle of the screen at the tablet breakpoint and lower but I’m not sure how to do it. I’m wondering if the problem has anything to do with the fact that I’m positioning these two grid child divs manually to ensure that the content div always precedes the image div at breakpoints below the Desktop breakpoint. How do I center this grid child image at the Tablet breakpoint? Thanks!

Screen Shot 2022-09-07 at 1.44.41 PM

Here is my site Read-Only: LINK

Hi @robertfdev,

It looks like this is due to the the composition of the image, there are gaps on the bottom and right hand side - here’s a link to the image:


Milan, thanks for catching that. I make that image from two other images and I’m not used to editing images. I knew there was something wrong but I didn’t know how to fix. After you pointed that out, I could understand my mistake and so I’ve fixed it. Thanks for taking a few minutes to help me with this. I really appreciate it.

1 Like