Jump to content

How to make product image to take more screen on mobile without cropping.

Recommended Posts

Hello,

Hope somebody could help me with this.

Recently I tried below code which do not crop the picture of the product:

@media (max-width: 767px) {
    .ProductItem-gallery-slides-item-image {
       object-fit: contain !important;
        width: 100%;
        height: 100vh;
        object-position: center ; 
    }
}

Does it possible to make images take much more screen on mobile without cropping the original images as well? Please see attached picture (yellow lines would be perfect size). I also attached picture of example what I imagine.

 

Thanks in advance!

https://www.ugnesstory.com

 

IMG-4081.jpg

IMG-4083.PNG

Link to comment
  • Replies 9
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Hi @tuanphan,

Thank you for looking into this.

Seems we managed to find another way and choose Aspect Ratio 2:3 (Vertical) for our images in Squarspace design settings and removed mentioned code which gave wanted result on mobile, but unfortunately we are now frustrating with desktop version.

Could you please advise how we can correct desktop version without touching setup in mobile? We want images in desktop version to fit in one screen and have less space between header and product (marked yellow).

 

image.thumb.jpeg.b13b35a1d67a0c6e08965ca24120d6cb.jpeg

image.thumb.jpeg.bc9fad5c0279606c2efcd490dc12d0d6.jpeg

Example of size what we are looking for one screen:

image.thumb.jpeg.81f24d98bb093cc6b663a313095038c4.jpeg

 

Thank you in advance!

 

 

 

Link to comment

Try this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:768px) {
nav.ProductItem-nav {
    display: none;
}

section#pdp {
    padding-top: 0px !important;
}

body[class*="type-products"].view-item article section:first-child {
    padding-top: 120px !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

@tuanphan Thank you again for looking into this again.

Seems your code helped to move product description more to the header, but unfortunately issue with image fitting in one screen and space between header is still an issue. Maybe you have any other thoughts on this?

image.thumb.png.6cae217f017dbe26564629056dc34472.png

Many thanks in advance!

Edited by Mindzek
Link to comment
  • 2 weeks later...

Hi again @tuanphan,

 

I was able to find solution without changing original product images, I used this code:

@media (min-width: 768px) {
    .tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item,
    .tweak-product-basic-item-gallery-design-carousel .ProductItem-gallery-slides-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70%;
        overflow: hidden;
        padding-bottom: 0;
    }
}

Also used these to correct space between header and product section:

.ProductItem-nav {
  display: none !important;
}
.product-layout-side-by-side {
  padding-top: 1vw !important;
}
section#pdp {
    padding-top: 80px !important;
}

body[class*="type-products"].view-item article section:first-child {
    padding-top: 60px !important;
}

But now I am struggling with two things and hope you can help me with this:

1) to keep my carousel arrows in the center, as I changed height of my image.

image.thumb.png.d661e403d7d87ecfbbd4d2c37b67a54c.png

2) I think also because of that I have pretty big space between product section and related products, which I failed to reduce.

image.thumb.png.8f46534fab3e18779e6f614b47c9cc05.png

Link to comment

#1. You can use CSS code like this to move arrows center

@media screen and (min-width:768px) {
.ProductItem-gallery-carousel-controls.enable-on-first-image-load.enabled {
    top: 350px;
    transform: unset !important;
}
}

#2. To reduce space, try this CSS code

.tweak-product-basic-item-gallery-aspect-ratio-23-standard-vertical .ProductItem-gallery-slides:before {
    padding-bottom: 100% !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

Hi,

Arrows now in place, thank you!

Regarding below code, seems it's only changing size of the image picture, space between section and footer remain the same:
 

.tweak-product-basic-item-gallery-aspect-ratio-23-standard-vertical .ProductItem-gallery-slides:before {
    padding-bottom: 100% !important;
}
Link to comment
On 10/25/2023 at 12:59 AM, Mindzek said:

Hi,

Arrows now in place, thank you!

Regarding below code, seems it's only changing size of the image picture, space between section and footer remain the same:
 

.tweak-product-basic-item-gallery-aspect-ratio-23-standard-vertical .ProductItem-gallery-slides:before {
    padding-bottom: 100% !important;
}

Can you change it to 100%? Then we can check it again easier

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.