How do I decrease the vertical padding between product variant buttons?

Hi, in my product details page, I see that there is a lot of vertical padding between the product variants buttons, and also between the top product variant and the price. (marked with red in the screenshot)

How do I decrease/adjust these width according my own preference? Thanks a lot in advance!

Product link - https://bluebird-tuba-waaw.squarespace.com/prints/p/coexistence 

Thank you so much @Web_Solutions, worked like a charm. 

Can you also help me out with one more thing? In mobile view, the vertical products I have are not filling the entire screen. How do I fix this? 

Link - https://bluebird-tuba-waaw.squarespace.com/prints

14 minutes ago, dipanjanpal said:

Thank you so much @Web_Solutions, worked like a charm. 

Can you also help me out with one more thing? In mobile view, the vertical products I have are not filling the entire screen. How do I fix this? 

Link - https://bluebird-tuba-waaw.squarespace.com/prints

Its for your image sizing. You should use the same size image. If you add code then it will look like the attached image. Is it ok?

20 minutes ago, Web_Solutions said:

Its for your image sizing. You should use the same size image. If you add code then it will look like the attached image. Is it ok?

I sell both horizontal and vertical prints so I can't have same size across all the products. 

Is there no way for it to look like this in the attached image? I have all the vertical images with a special tag so maybe there would be a way to fill width in mobile only for those tagged images? 

6 minutes ago, dipanjanpal said:

I sell both horizontal and vertical prints so I can't have same size across all the products. 

Is there no way for it to look like this in the attached image? I have all the vertical images with a special tag so maybe there would be a way to fill width in mobile only for those tagged images? 

There has two images. One image width is longer than height and one image width smaller than height. That is the problem.

6 hours ago, Web_Solutions said:

There has two images. One image width is longer than height and one image width smaller than height. That is the problem.

True, but I don't mind if the second image gets cropped a little bit. The second image is the preview of how the print will look like in someone's house. The first image is the product itself.

In ideal situation, I'd want the first image to fill width, and the second image to show with white bars on top and bottom, but I'm fine with the second image getting cropped a little bit for the first one to be portrait. Will that be possible?

9 minutes ago, dipanjanpal said:

True, but I don't mind if the second image gets cropped a little bit. The second image is the preview of how the print will look like in someone's house. The first image is the product itself.

In ideal situation, I'd want the first image to fill width, and the second image to show with white bars on top and bottom, but I'm fine with the second image getting cropped a little bit for the first one to be portrait. Will that be possible?

add this code on Custom CSS section.

@media screen and (max-width: 767px) {
    .view-list .grid-item .grid-image-wrapper {
        padding-bottom: 0 !important;
        height: auto !important;
    }
    .view-list .grid-item .grid-image-wrapper img:first-child {
        position: relative !important
    }
}

9 hours ago, Web_Solutions said:

 

add this code on Custom CSS section.

@media screen and (max-width: 767px) {
    .view-list .grid-item .grid-image-wrapper {
        padding-bottom: 0 !important;
        height: auto !important;
    }
    .view-list .grid-item .grid-image-wrapper img:first-child {
        position: relative !important
    }
}

 

Thank you so much! It worked flawlessly!