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
1282 334 398

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

 

 

 

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


BSS: B2B Wholesale Solution |BSS: B2B Portal, Quote, Net 30 | B: B2B Lock Password Protect


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

Ryan1998
Pathfinder
101 2 32

DESKTOP VIEW ONLY PLEASE

BSSCommerce-B2B
Shopify Partner
1282 334 398

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

 

 

 

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


BSS: B2B Wholesale Solution |BSS: B2B Portal, Quote, Net 30 | B: B2B Lock Password Protect


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-B2B
Shopify Partner
1282 334 398

Hi @Ryan1998 

Has your issue been resolved?

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


BSS: B2B Wholesale Solution |BSS: B2B Portal, Quote, Net 30 | B: B2B Lock Password Protect


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Ryan1998
Pathfinder
101 2 32

yes thanks