Aligning Images of Complimentary "Pairs Well With" Products

Store Design
, , ,
1

Hello,

I’m hoping that someone can help me align the complimentary images below the product description on the product page (see image below).

They used to be in a column, with the title and price on the side of the image and I want them in a row, with the title and price below the image. I did that using the code below but for some reason they are not aligning as they should. One is always smaller than the other and seems a bit higher. Would love to get some help, thank you!

http://ad6568.myshopify.com

PW: tomato123

This is the code I used:

.complementary-products__grid {
display: flex;
flex-direction: row;
justify-content: space-between;

}

.complementary-product {
display: flex;
flex-direction: column;
align-items: center;
}

.complementary-products {
–slide-item-outer-gap: 0;
–slide-item-inner-gap: 0;
–slide-item-padding: 0;

Screen Shot 2023-10-07 at 11.43.18 AM.png
Screen Shot 2023-10-07 at 11.43.18 AM.png3666×1724 427 KB

2

Generally the issue is the images themselves are different aspect ratios, portrait vs landscape.

So your not having to fight that you would need to either normalize the actual real sizes of the images themselves, or constrain their sizes in CSS.

3

Hi Paul,

Thank you for responding!

Both images are actually squares. There’s white background, surrounding the frame, within the image. Now that I think, I should have probably mentioned that, because it’s a bit confusing.

Knowing that, would anything else come to mind? Thank you!

4

Just a follow up, I was able to align them by constraining the sizes in CSS and removing the gap between. Thank you again!

5

Hello.
May I ask in which file you added the code, as I am having the same challenge, thank you :slightly_smiling_face:

6

Hi,

I added the code in editor at the bottom of the styles.css.liquid

This is what worked for me:

.complementary-products__grid {
    display: flex;
    flex-direction: row;
}

.complementary-product {
    display: flex;
    flex-direction: column;
    align-items: center;
  width:150px;
}