Product Page - Way to resize image on all product pages

Steve_Scammell
New Member
7 0 0

Hi, 

This is my 1st ever question. 

My store is https://dishydogs.com.au  on Brooklyn theme

Is there a way to make all product page images (different sizes currently) to display as same size? The images are too large and showing 100%. I looked at older tickets and have tried various code options but failed to resize.

I made the following changes to resolve the issue in theme.scss.liquid with various options but it did not resolve the issue.

/*@media screen and (min-width: 300px){
#shopify-section-featured-collections .wrapper {
padding: 0 0px;
max-width: initial;
width: 80%;
}
}
.product-single__media{
height: auto !important;
max-height: 298px !important;
height: 50%;
min-height: 298px;
max-width: 100% !important;
}
.product-single__media {
padding-top: 80% !important;
max-height: 300px !important;
height: 10%;
min-height: 300px;
max-width: 50% !important;
}

.productitem--image {padding-top: 100%;}
.productitem--image img {
top: 0 !important;
transform: none !important;
left: 0 !important;
position: absolute;
height: 50% !important;
object-fit: contain;
}

.product__img-wrapper {
max-width: 50% !important;
}

.productitem--image img {
max-width: 50% !important;
max-height: 50% !important;
}*/
/* End */

This is one of the product page - https://dishydogs.com.au/products/kidney-tonic-for-pets

Any help will be much appreciated.

0 Likes
HardikDavra
Shopify Partner
2329 367 1003

Hello, @Steve_Scammell 

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Steve_Scammell
New Member
7 0 0

Hi Hardik,

I did mention the website but here it is - My store is https://dishydogs.com.au  on Brooklyn theme

 

0 Likes
HardikDavra
Shopify Partner
2329 367 1003

@Steve_Scammell Could not get your problem. Please explain more with screenshots.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Grace_01
Excursionist
38 2 4

You should edit your images in paint or photoshop add more white space background and keep all images aspect ratio equal like 1024x1024  

0 Likes
Steve_Scammell
New Member
7 0 0

This is one of the product page - https://dishydogs.com.au/products/kidney-tonic-for-pets

The picture is showing very large. I just want to know if there is a way to show reduce the height and width of this image and in all product pages with a code. 

0 Likes
Steve_Scammell
New Member
7 0 0

@Grace_01 I am not sure how will that reduce the height and width of the picture

0 Likes
HardikDavra
Shopify Partner
2329 367 1003

@Steve_Scammell 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.product-single__photo--container div {
    padding-top: 100% !important;
}
.product-single__photo--container div .product-single__photo {
    object-fit: contain;
    height: 100%;
}

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
Grace_01
Excursionist
38 2 4

It will not reduce dimensions of image.. since your product doesn't have any space apart from product and hence it covers entire screen size.. try replacing with shared image and check if you see any changes

 dishydogs.jpg 

0 Likes
Steve_Scammell
New Member
7 0 0

@HardikDavra, thanks that worked. Please check. Can I center the image horizontally and vertically?

0 Likes