How can I align the product grid images?

Store Design
, ,
1

How can I align the product grid images as the example website? Both we are using Impulse theme.
Have in mind that my Custom CSS is already full !

My website link: WOMEN NEW ARRIVALS – Melanth
The example website link: https://zekira.com/collections/women-new-arrivals

1000118510
10001185101080×2340 361 KB

1000118509
10001185091080×2340 357 KB

1 Like
2

I’ve seen this happen quite a few times with the Impulse theme it’s usually due to inconsistent image aspect ratios (e.g., some are cropped square while others are portrait). The theme grid then tries to align them automatically, but without equal height, they end up looking misaligned.

To fix it without adding more custom CSS, try this quick check:

  1. Go to Online Store - Customize - Collection pages

  2. Under the Product grid section, look for “Image ratio” and set it to Square (1:1) or Portrait (2:3) just make sure all product images follow the same ratio in Shopify’s media.

  3. If your Custom CSS file is already full, you can still add a tiny style override in the theme.liquid footer between <style> tags.

If you’d like, I can take a quick look at your theme structure and alignment settings to match it more precisely to Zekira’s layout sometimes it just needs a few adjustments in the grid-item__content wrapper.

3

@Jim3 please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media only screen and (max-width: 768px) {
    .grid__item {padding-left: 0px !important;}
}
1 Like
4

Ah, yep—this is something I deal with all the time. There’s definitely a trick to getting it just right, but don’t worry—I’ve got you. I can handle it for you and save you the hassle.

6

Hello @Jim3 ,

@media only screen and (max-width: 768px) {
    .grid {
        margin-left: -10px;

    padding-left: 5px;

    }
}

@media only screen and (max-width: 768px) {
    .grid__item {
        padding-left: 5px;
    }
}

It will appear like

image
image397×787 101 KB

1 Like
7

[quote=“AiTrillion, post:6, topic:570048”]
`margin-left: -10p

The code definitely makes a difference towards what I am searching for but still you can see that on the right side the spacing is untouched and also in the left side I think there should be 0.1em spacing to be able to match zekira style which I am looking for. Can we make something about this?

1760178331313
17601783313131080×2340 346 KB

8

Hey, I like what you did, but I still prefer the look of the Zekira one, and I think we can achieve a similar result. It seems that on both sides, Zekira has around 0.1em spacing, and between the photos, there’s also about 0.1em of space. Could we adjust it to match that style, please?

1760178596021
17601785960211080×2340 310 KB

1000118510
10001185101080×2340 361 KB

9

add this css and check

@media only screen and (max-width: 768px) {
.grid__item {padding-left: 0px !important;}
.collection-content .grid{margin-right: -7px;}

}
1 Like
11

This almost worked but it cut the product images from the left side.

Screenshot_2025-10-11-18-20-25-086_com.android.chrome
Screenshot_2025-10-11-18-20-25-086_com.android.chrome1080×2340 346 KB

I used this parameters @media only screen and (max-width: 768px) { .grid__item {padding-left: 2px !important;} .collection-content .grid{margin-right: -8px;} }

12

try this

@media only screen and (max-width: 768px) { 
.grid__item {padding-left: 2px !important;} 
.collection-content .grid{margin-right: -8px; margin-left: -5px;}
 }
1 Like
13

God bless you ! I workout :slight_smile:

1 Like