I would like to get rid of blank space and make product pictures smaller (Boundless Theme)

Solved
Furrybuddie
Excursionist
31 0 7

Hello,

I am currently using the Boundless Theme and I really need some help with this. When you click a product and it takes you to the product page with the description, prices, etc., there is a huge annoying blank space in between the first 2 images and the product description. I have added a picture to show you what I am talking about. I would like to decrease this blank space. Also, is it possible to decrease the size of the product images? The homepage picture sizes are fine but when you click on a specific product, the product images are quite big. I would like to decrease these sizes. I have added a picture showing this as well.

Thank you so much

Screen Shot 2021-01-14 at 4.41.05 PM.pngScreen Shot 2021-01-14 at 4.41.12 PM.png

KetanKumar
Shopify Partner
14494 1670 5204

@Furrybuddie 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Furrybuddie
Excursionist
31 0 7

Hello, it is furrybuddie.com

0 Likes
paramSoft
Shopify Partner
1466 239 655

Please place this code at the end of theme.scss

.product__photo--single, .product__photo .product__photo--single {
padding-top: 45% !important;
}

 

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
KetanKumar
Shopify Partner
14494 1670 5204

This is an accepted solution.

@Furrybuddie 

Thanks can you please try

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

.product__photo--single {padding-top: 60% !important;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Furrybuddie
Excursionist
31 0 7

Thank you very much! That solved the blank space problem. 

Is there a way I can make the product pictures smaller? They are quite big.

0 Likes
paramSoft
Shopify Partner
1466 239 655

 

.product__photo--single img {
width: 65% !important;
}
.product__photo--single img {
width: 32% !important;
}

 

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
Furrybuddie
Excursionist
31 0 7

When I do that, it makes the mobile view look like this. How can I change this to fit the wide display on mobile?

 

A1ACA5D7-07D2-41AE-86C5-C2B5C894D812.jpeg

0 Likes
Furrybuddie
Excursionist
31 0 7

That solved the blank space problem when viewing from a desktop. However, when you view the product on mobile, this is how it looks like. It cuts off the name, color, and size. How can I fix this?

IMG_5612.jpg

0 Likes
paramSoft
Shopify Partner
1466 239 655

Please copy my last code again because I have changed the code

paramSoft_0-1610693098723.png

 

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes