How can I adjust the size of my product's main image?

Store Design
1

hi,

I need to adjust the product main image size as it’s way to big and cuts off the screen.

I tried 2 diff codes didn’t help and messed up other stuff. I think the arrows that select extra images need to move up also

https://luxurymrkt.com/collections/newest-products/products/blaze-milano-shamrock-trousers

C8A053CF-2458-47B1-992C-D2A0F070D6BD.jpeg
C8A053CF-2458-47B1-992C-D2A0F070D6BD.jpeg3024×4032 1.54 MB

2

@Luxurymrkt

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.product-image-main .image-wrap {
    padding-bottom: 100% !important;
}

.product-image-main .image-wrap img {
    object-fit: cover;
    position: absolute;
    max-width: 320px;
    margin: 0px auto;
    text-align: center;
    left: 0;
    right: 0;
}

KetanKumar_0-1663641487534.png
KetanKumar_0-1663641487534.png1898×942 110 KB

3

Hi @Luxurymrkt ,

You can check these steps:
Go to your Online store > Themes > Actions > Edit code
Go to Asset folder and open the section-main-product.css file.
Find the code below

@media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
max-width: 64%;
width: calc(64% - 1rem / 2);
}

Change the max-width to 50%

  1. Next, find the other code for the product info, see below
.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
padding-left: 4rem;
max-width: 36%;
width: calc(36% - 1rem / 2);
}
  1. Change the padding-left to 5rem, max-width to 50%, then click SAVE

I hope this helps.

4

Thank you!!

5

@Luxurymrkt

its my pleasure to help us

6

@brayanweldir

can you please share store url