Prestige theme: how to align image height in collection page

ContainsStudio
Tourist
8 0 3

Hello,

I just installed the Prestige theme and the images in my collection aren't aligning to the same height.

ContainsStudio_0-1618663202258.png

 

Is it possible to edit the code to have all the images aligned to the same height?

 

Thank you

dmwwebartisan
Shopify Partner
5877 1342 1724

@ContainsStudio 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ContainsStudio
Tourist
8 0 3

Thank yuou

 

The website is houndstooth-closet.com and password is "mansoon".

dmwwebartisan
Shopify Partner
5877 1342 1724

@ContainsStudio 

Add code assets/theme.scss.liquid  bottom of the file.

@media screen and (min-width: 641px){
.AspectRatio::before {padding-bottom: 310px !important;}
}

 Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
ContainsStudio
Tourist
8 0 3

Thank you very much, the size was fixed but the image got stretched:

ContainsStudio_0-1618665216689.png

Is there a way to fix this so that the image stays in the right ratio?

 

Thank you.

 

dmwwebartisan
Shopify Partner
5877 1342 1724

remove old CSS and new this 

@media screen and (min-width: 641px){
.AspectRatio::before {padding-bottom: 385px !important;}
}
If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ContainsStudio
Tourist
8 0 3

Thank you very much!

 

It works perfectly on desktop but doesn't work on mobile.

Is there a responsive version of the code?

IMG_7429.PNG

 

Thank you very much!

0 Likes
dmwwebartisan
Shopify Partner
5877 1342 1724

add CSS for mobile .

@media screen and (max-width: 640px){
.AspectRatio::before {padding-bottom: 150px !important;}
}

 

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ContainsStudio
Tourist
8 0 3

Thank you for your help!

 

The issue of the image size is fixed but the images are also stretched on mobile.

IMG_7430.PNG

 

I also just realised that on mobile, my navigation menu doesn't show up and is staying as "Catalog", would you know how to fix this please?

IMG_7431.PNG

 

Thank you very much!

0 Likes
dmwwebartisan
Shopify Partner
5877 1342 1724

please remove old  CSS and add new CSS for mobile .

@media screen and (max-width: 640px){
.AspectRatio::before {padding-bottom: 147%  !important;}
}

 

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes