Product Image orientation

Site URL: https://www.peterdegnanphotography.com/

I have a shop set up and it contains all the info I need and images display correctly. When users access it they can click through to the product file via the hover over hand that appears on the image. When they do this the format of the images is all wrong and appear cropped. I have created different categories for portrait and landscape oriented images and used the Design changes to make images of the products fit the orientation. It always somehow tends to default back to a landscape format and the portraits are cropped again. Any way around this?

Thanks

On 7/18/2021 at 5:16 PM, PeteD said:

Site URL: https://www.peterdegnanphotography.com/

I have a shop set up and it contains all the info I need and images display correctly. When users access it they can click through to the product file via the hover over hand that appears on the image. When they do this the format of the images is all wrong and appear cropped. I have created different categories for portrait and landscape oriented images and used the Design changes to make images of the products fit the orientation. It always somehow tends to default back to a landscape format and the portraits are cropped again. Any way around this?

Thanks

Try adding to Design > Custom CSS

/* Fix image crop */
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

Thank you taunphan, that worked a treat!

Cheers!

Pete

On 7/20/2021 at 4:18 PM, PeteD said:

Thank you taunphan, that worked a treat!

Cheers!

Pete

Hi. DO you want to help with these?

Site URL – https://www.peterdegnanphotography.com/

1. (All devices – Contact) Link put in button Contact us is https://www.peterdegnanphotography.com/contact and it does not exist.

https://www.peterdegnanphotography.com/contact

2. (Mobile – Street photography) Paginations overlap.

https://www.peterdegnanphotography.com/street-photography/brexit

3. (Mobile – Shop) Categories are cut into 2 lines.

https://www.peterdegnanphotography.com/print-sales

4. (Tablet – Homepage) Increase text width?

https://www.peterdegnanphotography.com/

Hi, thank you for catching these.

I thought I had set up the Contact me button correctly but noticed an error in the linking URL. Its fixed now and working.

I tested as much as I could with the mobile emulator in the Squarespace website builder but missed 2 & 3. Number 4 I couldn't test on a tablet. If you have any pointers you can give me to resolve these it would be much appreciated.

Cheers

Pete

On 7/22/2021 at 8:40 PM, PeteD said:

Hi, thank you for catching these.

I thought I had set up the Contact me button correctly but noticed an error in the linking URL. Its fixed now and working.

I tested as much as I could with the mobile emulator in the Squarespace website builder but missed 2 & 3. Number 4 I couldn't test on a tablet. If you have any pointers you can give me to resolve these it would be much appreciated.

 

Cheers

Pete

To open Tablet >> Right click on anywhere on your site >> Click Inspect Element >> Choose iPad on top of browser.

2. You want to reduce size or replace with Prev/Next text?

3. Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-60ed9c411608af7c639d2b94 h2 {
    white-space: nowrap !important;
}
}

Taunphan, thanks once again for the help. Been on vacation so catching up with the suggested changes. I think your suggestion for 2) would work, with "Next Gallery" and "Previous Gallery" being preferable. I still haven't been able to see the webpage in Tablet mode. I have done as you suggested and all I get is a mobile phone view, cant see a tablet view option.

Cheers

Pete

On 8/7/2021 at 4:04 AM, PeteD said:

Taunphan, thanks once again for the help. Been on vacation so catching up with the suggested changes. I think your suggestion for 2) would work, with "Next Gallery" and "Previous Gallery" being preferable. I still haven't been able to see the webpage in Tablet mode. I have done as you suggested and all I get is a mobile phone view, cant see a tablet view option.

Cheers

Pete

Hi. See this video: https://www.loom.com/share/ea2fdc0e347f48ca823272f5e7136e2b

Thanks, my Mac wasn't exactly like the video but I found it using the guide it provided. It does look a bit strange on the tablet view but I don't know how I can change that without screwing up the desktop view layout. Similar with the Next/Previous gallery fix. Is there a code fix for that?

Cheers

Pete

19 hours ago, PeteD said:

Thanks, my Mac wasn't exactly like the video but I found it using the guide it provided. It does look a bit strange on the tablet view but I don't know how I can change that without screwing up the desktop view layout. Similar with the Next/Previous gallery fix. Is there a code fix for that?

Cheers

Pete

How do you want it on a tablet?

Ideally wrapped around the picture but I don't know how I can do that without adding an additional text block which could screw up other views. Alternatively with the picture above the text as in the mobile view. Thank you

On 8/9/2021 at 3:27 PM, PeteD said:

Ideally wrapped around the picture but I don't know how I can do that without adding an additional text block which could screw up other views. Alternatively with the picture above the text as in the mobile view. Thank you

Q2. Add to Design > Custom CSS

/* Pagination title */
@media screen and (max-width:767px) {
h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}
}