topic Image Grid Not Centered in CMS Development

Image Grid Not Centered

ALazzarone — Thu, 16 Mar 2023 18:54:17 GMT

Hi,

I'm working with an image grid on my landing page and it is not centered correctly. I've tried messing with every setting I can find, but it still sits a little to the right (on both desktop and mobile). See the attached images for reference. You'll see how the grid is closer to the right margin than the left. Is this a Huspot issue, or is there a setting you can point me to to fix this? Thanks!

Re: Image Grid Not Centered

BoatsByGeorge — Sat, 18 Mar 2023 17:44:00 GMT

I am also dealing with this issue. It's driving me insane because I can't for the life of me figure it out.

Re: Image Grid Not Centered

BoatsByGeorge — Sat, 18 Mar 2023 17:47:44 GMT

So I just found that if you check spacing, and you choose to edit separately, you can ad 40 px of spacing on the right margin and it seems to center everything fine.

I don't know why they offset image grids but that's how it's set up in hubspot.

Re: Image Grid Not Centered

ALazzarone — Mon, 20 Mar 2023 15:09:53 GMT

Thank you! So odd that we have to do this manually, but it worked. It seemed to look centered on mobile, too. Thanks again!

Just a note, you have to select the image grid, go to the "Styles" tab, and click the "Image grid" dropdown to access these spacing settings.

Re: Image Grid Not Centered

Jnix284 — Sat, 01 Apr 2023 16:34:26 GMT

@ALazzarone @BoatsByGeorge I took a look at the code for the module, it looks like it has a role set of "list" which is making it a UL (unordered list) which has a padding-inline-start set of 40px, this is inherited from the user agent stylesheet which is why you can't edit it in the module, but also why adding the right 40px fixes the issue.

Hope this helps ease your mind 🙂