Alight product photos to bottom instead of top - Impulse Theme

Solved
New Member
8 0 0

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

Hello 

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

Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
0 Likes
New Member
8 0 0

Pallavi,

 

Thanks for your help! Below is the link: 

 

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

0 Likes

You forgot to share password, please share password.

Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
0 Likes
New Member
8 0 0

Pallavi,

 

Below is the password:

 

feufla

 

My apology! 

0 Likes

Success.

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 custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
1 Like
New Member
8 0 0

This worked perfectly! Thank you very much. 

 

Cheers,

 

Jeff 

0 Likes