Aligning 2 image boxes in Horizon theme

Store Design
1

Can some one guide me how an I align these 2 pictures via CSS code. So the first box of the image is properly aligned with second one as per the red line. I am using Horizon theme, please I am beginner need some help from community

image
image1920×726 140 KB

2

To give you a proper answer, I would need to see the website’s code. Could you provide a link to this page?

3

Hey @angelina-new-user

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hi @angelina-new-user

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

5

Your store runs the Vitazen theme, and this is its Image banner section. So I built and tested a fix on Vitazen store.

Before and After applying the fix:

Before - the left box sits 84px lower than the right box
Before - the left box sits 84px lower than the right box1440×620 171 KB

After - both boxes start on the same line
After - both boxes start on the same line1440×620 159 KB

Steps

  • Online Store > Themes > Customize
  • Click the Image banner section that holds the cat and dog images
  • Scroll to the bottom of its settings and open Custom CSS
  • Paste this, then Save:
.banner--image-space-true .grid__item:first-child {
  margin-top: 0 !important;
}

Paste the code into the section's Custom CSS box
Paste the code into the section's Custom CSS box596×480 78.6 KB

No-code alternative

  • In that same section, look for a toggle that offsets or spaces the images (something like an image-space or stagger option)
  • Turning it off aligns the tops without any code

Regards,
Ploqo

6

If those two image boxes are sitting on different vertical lines, I’d first check whether one of them has extra top margin or padding, or whether the image itself is being centered inside a taller wrapper.

In Horizon, that usually means the two blocks don’t have the same height or the image is being treated differently in each block, so the fix is often to make both wrappers use the same flex alignment and remove any extra spacing on the one that sits lower.

If you can share the store link, we can point you to the exact selector to change, because with Horizon the class names matter a lot and the right fix depends on whether this is an image banner, a custom liquid block, or two separate columns.