Alight product photos to bottom instead of top - Impulse Theme

Solved
Highlighted
Excursionist
28 0 2

Good afternoon! 

 

I'm trying to find, in my CSS, a way to align my product photos to the bottom instead of the top. If they were aligned at the bottom, the white space would be above instead of below the photo, where it's throwing off the alignment of the product title & price. 

 

Attached is a screenshot. Any help is greatly appreciated! 

 

Cheers,

 

Jeff Screen Shot 2019-09-10 at 4.44.05 PM.png

0 Likes
Highlighted

Hello 

Can you share your site url so that i can check and let you know.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
28 0 2

Pallavi,

 

Thanks for your help! Below is the link: 

 

https://miller-motorcars-boutique.myshopify.com

0 Likes
Highlighted

You forgot to share password, please share password.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
28 0 2

Pallavi,

 

Below is the password:

 

feufla

 

My apology! 

0 Likes
Highlighted

This is an accepted solution.

Hello,

Please add this code in bottom of theme -> edit code -> asset -> theme.scss.liquid

.image-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    padding-bottom: 50% !important;
}

.image-wrap img.grid-product__image {
    max-width: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}
.image-wrap:before {
    content: "";
    float: left;
    padding-top: 100%;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Excursionist
28 0 2

This worked perfectly! Thank you very much. 

 

Cheers,

 

Jeff 

0 Likes
Highlighted
Excursionist
28 0 2

@oscprofessional 

 

This actually made all of my images cropped, so unfortunately it doesn't work. All of the products images are various sizes, and the focal point is not correct on most products. 

 

Can you please assist with the CSS that would strictly just align the products in the collection page to the bottom? 

0 Likes
Highlighted
Tourist
14 0 0

Can you not ‘pad out’ your images with white space to make them all the same height?

We had a similar issue so ran our images through an image editor and used batch processing to automatically resize the canvas with either a transparent or white background. Note, we resized the canvas, not the image. 
I resized centrally, but if you resize with the ‘extra’ to the top of the image, they will appear bottom aligned when all the same size. 
Just an idea?

0 Likes