Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 4

Infamous problem with aspect ratio of product page images in MOBILE


adrianrydz

Question

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

 

212681401_256750615888104_1791942600360665476_n.png

Edited by adrianrydz
Link to comment

12 answers to this question

Recommended Posts

  • 1

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

216509818_210971907612773_3031004443659542693_n.png

Link to comment
  • 0
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!

✦✦
Co-founder Hundred Studio 👋

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...