Looking to enlarge the thumbnail images on product pages in mobile version in debut theme

Store Design
, , ,
2

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “theme.liquid” file, look for:

@media only screen and (max-width: 749px) {
  .template-product .main-content {
    padding-top: 22px; }
  .product-single__media-group {
    position: relative; }
  .thumbnails-wrapper {
    position: relative;
    top: 10px;
    text-align: center;
    margin: 0 2px 30px 2px; }
  .thumbnails-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 10px;
    padding-bottom: 10px; }
    .thumbnails-slider__btn .icon {
      height: 14px;
      width: 14px; }
  .thumbnails-slider__prev {
    left: -15px; }
  .thumbnails-slider__next {
    right: -15px; }
  .product-single__thumbnail {
    margin: 0 auto; } }

We are going to add: width: {whatever width you want} px; to “.product-single__thumbnail”:

@media only screen and (max-width: 749px) {
  .template-product .main-content {
    padding-top: 22px; }
  .product-single__media-group {
    position: relative; }
  .thumbnails-wrapper {
    position: relative;
    top: 10px;
    text-align: center;
    margin: 0 2px 30px 2px; }
  .thumbnails-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 10px;
    padding-bottom: 10px; }
    .thumbnails-slider__btn .icon {
      height: 14px;
      width: 14px; }
  .thumbnails-slider__prev {
    left: -15px; }
  .thumbnails-slider__next {
    right: -15px; }
  .product-single__thumbnail {
    width: {desired width} px;
    margin: 0 auto; } }

Where desired width is the size you want you thumbnails to be.