how can i resize the product image in Boundless theme

[amit101297]

Hi,

I'm using the boundless theme and i want to resize the product image which will be smaller and not all over the page and the image will be in the middle
I would like to know if there is such an option and if so how can it be changed?

https://www.outfiteam.com/collections/%D7%A9%D7%A8%D7%A9%D7%A8%D7%90%D7%95%D7%AA/products/%D7%A9%D7%...

thank you for the help

[KetanKumar]

@amit101297 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product__photo {
    max-width: 500px;
    margin: 0px auto;
    float: none;
}

Change the value as you like

[amit101297]

Hi,
Thanks for the help!!

I was able to resize the image but how do I change it to the center?

[KetanKumar]

sorry i can't see above code do you have added?

[amit101297]

this is the code

/*================ Product images ================*/

.product__photo {
position: relative;
}

.product__photo--single {
position: relative;

img {
position: absolute;
top: 0;
left: 0;
right: 0px;
width: 50%;
height: 50%;
z-index: 1;
margin: 0px;
float: none;
}

[KetanKumar]

no, it's wrong please add below code

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product__photo {
    max-width: 500px;
    margin: 0px auto;
    float: none;
}
Change the value as you like

this one

[amit101297]

ok, I did it but there is a large space and the picture is not in the middle

/*================ Product images ================*/

.product__photo {
max-width: 700px;
margin: 0px auto;
float: none;

position: relative;
}

[KetanKumar]

@amit101297 

Thanks for it

can you please find both are class in theme.scss and update below code 

.product__photo {
    max-width: 600px;
    margin: 0px auto;
    text-align: center;
    float: none;
    position: relative;
}
.product__photo--single img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0px;
    float: none;
}

[amit101297]

yes !! it is working !! 

thank you so much !!

Can I put 2 pictures without them one under the other?

and put the size menu in the middle?

[Jofdom]

Hi,

Did you find how to get both images next to each other instead instead of one under the other?

Thanks

[tmlws94]

Anyone figure this out for two images?

[KetanKumar]

HEllo, @tmlws94 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[DTGameChanger]

Our store  https://gamechangerscanada.myshopify.com/  (ballergear.ca)  is also having issues with multiple pictures.  

All looks good on the pages, except you are unable to purchase any item with multiple pictures. 

DT

[KetanKumar]

@DTGameChanger 

can you please share further issue screenshot

[SR1234]

Hi Ketan,

I used the code you provided for resizing images of products and it worked. I am having an issue with the position of the product, they are currently aligned vertically instead of being displayed side by side. Can you please provide coding that will fix this issue?

Below is a screenshot of how they are currently positioned. I would like them to be side by side. Thank you

[KetanKumar]

@SR1234 

Thanks for the update can you please give me this product url you have a facing issue?

[alecontrmon]

Hi, 

Did you figure out the solution on how to put the images one next to the other instead of one under the other after changing the code you suggested?

Thank you in advance for your help!

[KetanKumar]

@alecontrmon 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[alecontrmon]

@KetanKumar I can give you my website but I haven't add this as it's not working as I would like It to. Therefore the question, You can see of previous posts that the pictures are one on top of the other instead of side by side. Could this be fixed? I mean the coding is the one you gave us so nothing different.

Thank you 

[KetanKumar]

Hello, @alecontrmon 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.