Product page image (mobile view)

[Ryan1998]

Move arrows and maker image longer?

url: https://errival.com/products/errival%E2%84%A2-mini-rubber-band-shotgun 

[BSSCommerce-HDL · Accepted solution]

Hi @Ryan1998, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
 @media only screen and (max-width: 749px) {
        .product  .slider-buttons {
          z-index: 999;
          transform: translateY(-50%);
          position: absolute;
          justify-content: space-between !important;
          width: 100vw;
          top: 50%;
          display: flex;
          align-items: center;
        }

        .product  .slider-counter.caption {
            display: none !important;
        }
        .product  .slider-button .icon {
           height: 100% !important;
        }
      }
 </style>

[BSSCommerce-HDL · Accepted solution]

Hi @Ryan1998, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
 @media only screen and (max-width: 749px) {
        .product  .slider-buttons {
          z-index: 999;
          transform: translateY(-50%);
          position: absolute;
          justify-content: space-between !important;
          width: 100vw;
          top: 50%;
          display: flex;
          align-items: center;
        }

        .product  .slider-counter.caption {
            display: none !important;
        }
        .product  .slider-button .icon {
           height: 100% !important;
        }
      }
 </style>

[Ryan1998]

thank you!

[BSSCommerce-HDL]

@Ryan1998 , I'm glad I could help you 😍

[BSSCommerce-HDL · Accepted solution]

And this code make image longer: 

<style>
.product-media-container .media {
     padding-top: calc(1 / 1.5* 100% + 80px) !important;
}
.product-media-container .media img {
     object-fit: fill !important;
 }
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Ryan1998]

even better!