How to make product description images smaller for mobile view compared to desktop?

[snnggest]

1) How to make product description images smaller for mobile view compared to desktop (the image sizes on the desktop version do not fit on the mobile version) so a way to make it smaller or have separate images for both one for mobile and one for desktop? 

https://snipboard.io/owULGI.jpg (as u can see the images do not fit on the mobile view) so can you make it separate for desktop and mobile) or is there another way?

store link: https://0nu4nc-ra.myshopify.com/products/example-t-shirt 

currently using Dawn theme 12.0.0

2) how to make the product image stop moving up and down when scrolling https://snipboard.io/RhdPHB.jpg and how to enlarge it to a fixed size?

[snnggest]

Hi Anthony, yes please give more details 

thanks

[snnggest]

hi, can't get it to work 

[TikitaTech · Accepted solution]

Hi @snnggest!

For problem 1:

Head to Admin > Themes > Customise > example t-shirt page

Select the area containing the image and add the following to your Custom CSS section (in the right side-bar):

img {
  width: 100%;
}

This will result in the image fitting in the container as shown below:

For problem 2:

Head to Admin > Themes > Customise > edit code > file section-main-product.css > around line 1602:

Currently css is set to:

@media(min-width: 991px){
  .slider-mobile-gutter{
    position: sticky;
    top: 160px;
    height: max-content;
  }
}

The position: sticky; is causing the image to move as the page scrolls. Changing position to relative, will keep it in place.

Currently, the top: 160px sets all the images out of alignment with the product description:

Setting top to 0px will remove the top gap:

For easy copy and paste:

@media(min-width: 991px){
  .slider-mobile-gutter{
    position: relative;
    top: 0px;
    height: max-content;
  }
}

Hope this helps!

[snnggest]

thanks for the reply, the codes worked.

how do I now the image slider to how it is on mobile view? instead of it being stacked on the left side of the image

mobile:

desktop: