Infamous problem with aspect ratio of product page images in MOBILE

Site URL: https://adrianrydz.squarespace.com/shopartproduct/p/tokyo-sign-dj4tp

Hello to everyone,

I am sorry for asking again. I have my prints in landscape and portrait orientations so I came across serious problems with an aspect-ratio of product images like many other users here (yeah, I read lots of posts about it).

I found out by myself a solution for this problem in DESKTOP so other users could apply to their webs too. You need to choose FORMAT- DESIGN - STACK. It makes all product images stacked in the orientations of your picture. No matter which one it is.

However, this solution not working for MOBILE. I used a code rule wrote by the incredible @tuanphan and @bangank36... and it solves a problem with orientation but leaves a HUGE space above and below landscape pictures. May I ask for any solution for it?

PASSWORD... yumichan

Hi. I see no black bar here. Did you solve it?

Hello! No, no, its still there in mobile version. Only landscape photos.

I checked it on two different phones and it is that huge space above and below, however...

when I change the size of window in desktop to a mobile proportion then something strange happens and the landscape photo is cropped that is even worse haha

Add to Design > Custom CSS

/* Black bar top bottom of product images */
@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-23-standard-vertical .ProductItem-gallery-slides:before {
    padding-bottom: 75% !important;
}
}

If this causes problems on other products, remove above code & edit products where you see black space >> Additional Info >> Add a Code Block >> Paste this code

<style>
  /* Black bar top bottom of product images */
@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-23-standard-vertical .ProductItem-gallery-slides:before {
    padding-bottom: 75% !important;
}
}
</style>

WOW! Adding the code blog worked! Incredible! Thank you very much!

Password doesn't work.

On 8/4/2021 at 6:11 AM, marketingm said:

@Kwamzilla check again 🙂

Use this CSS

@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-32-standard .ProductItem-gallery-slides:before {
	display: none !important;
}}

On 8/5/2021 at 8:01 AM, tuanphan said:

Use this CSS

@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-32-standard .ProductItem-gallery-slides:before {
	display: none !important;
}}

 

Hi @tuanphan, is there a version of this which will work with just an image block?

I'm trying to change the aspect ratio of the top image on the mobile homepage of suzannehamiltonpodiatry.com.

Desktop works as intended, but on mobile it scales down as landscape, I'd like to make this a portrait format to fill the mobile screen more.

Thanks!

On 8/9/2021 at 6:27 PM, CraigN said:

Hi @tuanphan, is there a version of this which will work with just an image block?

I'm trying to change the aspect ratio of the top image on the mobile homepage of suzannehamiltonpodiatry.com.

Desktop works as intended, but on mobile it scales down as landscape, I'd like to make this a portrait format to fill the mobile screen more.

Thanks!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-2518090d1655ad77c24f .image-inset {
    padding-bottom: 100% !important;
}
}

Brilliant @tuanphan – this works perfectly!

Thank you very much 🙂