Re: Help with Product Image Padding - Venture Theme

Solved

Help with Product Image Padding - Venture Theme

whiskeyworks
Tourist
7 0 1

Hello all!

 

So I've been messing around and managed to do part of what I wanted - moving the thumbnails to below my featured/main product image and altering the arrows, but now I have another issue.

 

I prefer how the spacing on my product pages look with just one image because the description is wider and easier to read in my opinion. But when I have the extra images the thumbnail bar ends up pushing into that space and squishing the text side down. Is there a way to limit the width of the thumbnail bar to the width of the displaying product photo? Or remove some of the padding to the left side of the screen to give my text it's space back? Photos below!

Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 839 987

This is an accepted solution.

Hi @whiskeyworks ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss->paste below code at the bottom of the file:

@media (min-width: 750px) {
.template-product .product-single > .grid__item {
     width: 50% !important;
    -ms-flex-preferred-size: 50% !important;
    -webkit-flex-basis: 50% !important;
    -moz-flex-basis: 50% !important;
    flex-basis: 50% !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

View solution in original post

Replies 5 (5)

AvadaCommerce
Shopify Partner
3879 839 987

Hi @whiskeyworks ,

 

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

banned
whiskeyworks
Tourist
7 0 1

This is my direct shop link https://whiskey-works.myshopify.com/

 

Direct links to the two product samples I'm working with as well since Ive made lots of categories for planned products

https://whiskey-works.myshopify.com/products/mile-high-club-leather-collar

https://whiskey-works.myshopify.com/products/hawks-test

 

Thank you!

AvadaCommerce
Shopify Partner
3879 839 987

This is an accepted solution.

Hi @whiskeyworks ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss->paste below code at the bottom of the file:

@media (min-width: 750px) {
.template-product .product-single > .grid__item {
     width: 50% !important;
    -ms-flex-preferred-size: 50% !important;
    -webkit-flex-basis: 50% !important;
    -moz-flex-basis: 50% !important;
    flex-basis: 50% !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned
whiskeyworks
Tourist
7 0 1

Yes! It works perfectly, thank you so much for your help!

bittybee
New Member
15 0 0

I am having an issue since I changed the images layout from vertical to horizontal where when I click through the image thumbnails at the bottom, those images open up in a separate window instead of just changing the main image on top. As I click each thumbnail at the bottom, the main image should display that specific thumbnail image. Is there a solution to this?

 

URL: https://competitionwerks.myshopify.com/collections/kline-innovation/products/testing-porsche-996-tur...