Decrease product image height + thumbnail arrows bigger?

Solved

Decrease product image height + thumbnail arrows bigger?

Ryan1998
Pathfinder
101 2 32

Can anyone help me decrease product image height + thumbnail arrows bigger? Happy to donate if someone can help.

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

PHOTO-2024-08-10-18-51-36.jpg

Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
1972 564 565

This is an accepted solution.

Hi @Ryan1998 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file section-main-product.css. Search for the following CSS snippet

 

@media screen and (min-width: 750px) {
    .product__column-sticky {
        display: block;
        position: sticky;
        top: 3rem;
        z-index: 2;
    }
}

 

Please change to it

 

@media screen and (min-width: 750px) {
    .product__column-sticky {
        display: block;
        position: sticky;
        top: 7rem;
        z-index: 2;
    }
    .product__column-sticky slider-component.slider-mobile-gutter:not(.quick-add-hidden) {
        scale: 0.9;
        transform: translateY(-2.4em);
    }

    .product__column-sticky .quick-add-hidden {
       transform: translateY(-3.4em);
    }

    .product__column-sticky .slider-button {
        scale: 6;
    }
}

 

The result

BSSCommerceB2B_0-1723334835699.png

When scrolling all the way down, everything is aligned.

BSSCommerceB2B_1-1723335247584.png

If it helps you, please like and mark it as the solution.

Best Regards

 

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 4 (4)

Ryan1998
Pathfinder
101 2 32

DESKTOP VIEW ONLY PLEASE

BSSCommerce-B2B
Shopify Partner
1972 564 565

This is an accepted solution.

Hi @Ryan1998 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file section-main-product.css. Search for the following CSS snippet

 

@media screen and (min-width: 750px) {
    .product__column-sticky {
        display: block;
        position: sticky;
        top: 3rem;
        z-index: 2;
    }
}

 

Please change to it

 

@media screen and (min-width: 750px) {
    .product__column-sticky {
        display: block;
        position: sticky;
        top: 7rem;
        z-index: 2;
    }
    .product__column-sticky slider-component.slider-mobile-gutter:not(.quick-add-hidden) {
        scale: 0.9;
        transform: translateY(-2.4em);
    }

    .product__column-sticky .quick-add-hidden {
       transform: translateY(-3.4em);
    }

    .product__column-sticky .slider-button {
        scale: 6;
    }
}

 

The result

BSSCommerceB2B_0-1723334835699.png

When scrolling all the way down, everything is aligned.

BSSCommerceB2B_1-1723335247584.png

If it helps you, please like and mark it as the solution.

Best Regards

 

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

BSSCommerce-B2B
Shopify Partner
1972 564 565

Hi @Ryan1998 

Has your issue been resolved?

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Ryan1998
Pathfinder
101 2 32

yes thanks