Jump to content

Product Image orientation

Recommended Posts

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

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

peterdegnanphotography.com-01-min.png

2. (Mobile – Street photography) Paginations overlap.

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

peterdegnanphotography.com-02-min.png

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

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

peterdegnanphotography.com-03-min.png

4. (Tablet – Homepage) Increase text width?

https://www.peterdegnanphotography.com/

peterdegnanphotography.com-04-min.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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

Link to comment
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment
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?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.