Solved

How do I change the vertical alignment of a product image in it's container? (Theme: Debut)

whiskified
New Member
4 0 0

I have various sized images sitting in fixed white containers, but they are all aligning to the top. I'd like them to sit in the center—I've tried adding "vertical-align: middle" to every place that made sense to no avail. See attached image. Hoping there is a solution that doesn't involve going through and resizing every product image that is affected! 

Screen Shot 2021-05-17 at 3.46.49 PM.png

Accepted Solution (1)
iDoThemes
Trailblazer
207 43 91

This is an accepted solution.

This is a symptom of forcing a fixed height of 270px for the product card element:

 

.product-card__image-with-placeholder-wrapper {
    height: 270px;
}

 

 

It also looks bad on tablet/mobile view:

Red Wine – Salvaje 2021-05-20 12-56-23.png

 

I recommend removing this rule and adding some padding to the image in you're looking to add some whitespace above and below:

 

.grid-view-item__image {
    padding-top: 1em;
    padding-bottom: 1em;
}

 

 

Which should look like this across all devices:

iDoThemes_0-1621479627403.png

 

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line

View solution in original post

Replies 8 (8)

Muhammad_Ali_S
Shopify Partner
664 121 183

@whiskified,

Please share your store URL.

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
whiskified
New Member
4 0 0
whiskified
New Member
4 0 0

@Muhammad_Ali_SAny thoughts?

Muhammad_Ali_S
Shopify Partner
664 121 183

@whiskified,
I have also faced this problem before.
In my opinion, it seems the images are not aligned properly by the Graphic Designer (It's difficult because of the bottle's different sizes).
For example, You might have images of sizes like 500x500 but due to bottles' different sizes, it will look irregular.
The designer should have to have the same padding (top, bottom, left, right) regardless of any size.

I think you need to have bottles of the same sizes plus the same gaps around them.
This way it will work for you.
Maybe someone has a better solution than me.

Regards,
Zeian

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
Muhammad_Ali_S
Shopify Partner
664 121 183

@whiskified,
In short good photography is a must when you are dealing with bootles.

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
iDoThemes
Trailblazer
207 43 91

This is an accepted solution.

This is a symptom of forcing a fixed height of 270px for the product card element:

 

.product-card__image-with-placeholder-wrapper {
    height: 270px;
}

 

 

It also looks bad on tablet/mobile view:

Red Wine – Salvaje 2021-05-20 12-56-23.png

 

I recommend removing this rule and adding some padding to the image in you're looking to add some whitespace above and below:

 

.grid-view-item__image {
    padding-top: 1em;
    padding-bottom: 1em;
}

 

 

Which should look like this across all devices:

iDoThemes_0-1621479627403.png

 

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line
whiskified
New Member
4 0 0

@iDoThemesOh man—thanks for the heads up on the mobile view! Thank you so much—your solution worked perfectly. Going forward all photos will be sized consistently, for sure 🙂 THANK YOU.

iDoThemes
Trailblazer
207 43 91

No problem, feel free to mark my answer as the solution to solve out this thread.

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line