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

[Matt_Dubinsky]

Looking to find out how to enlarge the thumbnail icons that appear below my product image on product pages while using the mobile version of my website and using debut theme

please see image here:

you can find this page here:

https://chelseasbeads.com/collections/new-products/products/feathered-lines-motif-glass-multi-color-...

[Kyle_Poieo-Dev · Accepted solution]

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.

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @Matt_Dubinsky  please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
@media only screen and (max-width: 749px) {
    .product-single__thumbnails-item {
        width: 150px !important;
        
    }
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly