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

Solved
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

0 Likes

@whiskified,

Please share your store URL.

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes
whiskified
New Member
4 0 0
0 Likes
whiskified
New Member
4 0 0

@Zeian_ShahzadAny thoughts?

0 Likes

@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

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes
iDoThemes
Excursionist
40 11 22

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
0 Likes

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

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes
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.

0 Likes
iDoThemes
Excursionist
40 11 22

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
0 Likes