Product Image sizes not centered and too large

Site URL: https://www.ardesignscompany.com/shop/p/engraved-wood-slice

I am having issues with how my product images look. I am not sure what to do to fix it.

I notice that the images on the computer are ok, but when I click on the images to open the lightbox, some images are off centered.

Now, when I look at the mobile version, all product images are too big and the lightbox images are either barely visible or not on the screen at all. Any help would be greatly appreciated.

@tuanphan

I can't click image here. Did you solve?

@tuanphan

I did not solve it. I got rid of the lightbox feature right now. I am attempting to resize all of the pictures individually, but am not able to find the appropriate ID to associate with each picture. I used the following:

@media screen and (max-width:640px)
{
  #yui_3_17_2_1_1602603034334_881
  { max-width:300px;
    margin-left:auto;
    margin-right:auto;
    display:block;
    width: 100% !important;
    height: auto !important;
    top: 15% !important;
    left: 3% !important;
  }
}

    I am trying to get the images to not be zoomed in and fit perfectly in the mobile view. I just do not now how to target individual pictures. It seems like all pictures are different and need to be adjusted individually

I will re-enable the lightbox feature as well so you can see what I am talking  about with that too.

@tuanphan

I ended up using the following:

@media screen and (max-width:640px)
{
  [data-image-id="5f57ce8da7d500572c61af2a"]
  { max-width:300px;
    margin-left:auto;
    margin-right:auto;
    display:block;
    width: 80% !important;
    height: auto !important;
    top: 0% !important;
    left: 8% !important;
  }
}

What do you think? I would still like to be able to re-size the lightbox images too