Jump to content

Size of portrait orientation photos in the Store Page (DESK/MOB) and Product Page (MOB)

Recommended Posts

Site URL: https://www.adrianrydzluxuryprints.com/shop

I am struggling to find anyone who could fix the size of my portrait orientation photos in the Store Page and Product Page in DESKTOP and MOBILE. If it is too complex to do it here on forum, is there ANYONE who I could contract it out? Is it possible to do with CSS?

The are some CSS codes that I already applied as for this problem (if it matters) such as...

- css codes to display all photos without cropping portrait orientation photos,

- css codes to remove upper and bottom space in landscape orientation photos in Product Page.

However portrait orientation photos are so small now compared to landscapes orientation ones.

IMG_1533.jpg

IMG_1532.jpg

Edited by adrianrydz
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Thank you for reading my post. Always amazed by your effort here to help us.

So there are two main problems...

1) I meant all portrait orientation (vertical design) product photos in my Store Page in DESKTOP AND MOBILE. They are too small because it looks like their height is limited by landscape orientation product photos. I want to change it so much.

https://www.adrianrydzluxuryprints.com/shop

(screenshot 1, 2, 3, and 4)

2) My portrait orientation (vertical design) product photos on individual Product Pages are too small but only in MOBILE. They look fine on DESKTOP.

For example... https://www.adrianrydzluxuryprints.com/shop/p/skytree

(screenshot 5)

I contacted some people to contract it out but no one replied. If anyone could do it here or outside of this forum, please let me know.

 

221931281_563613101337631_7488231670413980024_n.png

221715067_368297884736916_7189790208159716995_n.png

232144148_585156149144464_8262257452846322688_n.jpg

233424047_370597424510552_8519635081753372440_n.jpg

234136807_357334799343079_7806676707113359835_n.jpg

Edited by adrianrydz
Link to comment
  • adrianrydz changed the title to Size of portrait orientation photos in the Store Page (DESK/MOB) and Product Page (MOB)
23 hours ago, adrianrydz said:

Thank you for reading my post. Always amazed by your effort here to help us.

So there are two main problems...

1) I meant all portrait orientation (vertical design) product photos in my Store Page in DESKTOP AND MOBILE. They are too small because it looks like their height is limited by landscape orientation product photos. I want to change it so much.

https://www.adrianrydzluxuryprints.com/shop

(screenshot 1, 2, 3, and 4)

2) My portrait orientation (vertical design) product photos on individual Product Pages are too small but only in MOBILE. They look fine on DESKTOP.

For example... https://www.adrianrydzluxuryprints.com/shop/p/skytree

(screenshot 5)

I contacted some people to contract it out but no one replied. If anyone could do it here or outside of this forum, please let me know.

Q1. Try adding to Shop Page Header

<style>
.tweak-products-image-aspect-ratio-32-standard .products.collection-content-wrapper .grid-image-wrapper {
    padding-bottom: 100%;
}
</style>

Q2. Add to Shop Page Header

<style>
  @media screen and (max-width:767px) {
  img.ProductItem-gallery-slides-item-image {
    object-fit: cover !important;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

First of all, thank you for your precious time. So I tried adding those codes, and it looks like...

1) (Shop Page) it makes all portrait orientation photos bigger (perfect!) but... it crops all landscape orientation photos at the same time haha. Probably it is not possible to make all pictures to be in original dimension without cropping in Shop Page. Am I right?

2) (Product Page) unfortunately it crops portrait orientation photos in Product Page that we tried to make bigger.

I duplicated my website to test it so you can see it there, if you can take a look.

https://pike-grape-h3pg.squarespace.com/shop

password... tuanphan

Edited by adrianrydz
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.