Removing whitespace between product images homepage Boundless theme

soopexclusive
Excursionist
18 0 8

Hello there, 

I'm using the beautiful theme called 'Boundless' which is perfect for big boundless pictures next to each other. Because of that, I would love to showcase my product images on the homepage next to each other without any padding and thus no whitespace. Could someone please help me with this? My website is almost finished and this is still causing me a lot of headache.. 

website url: https://w8zh1283oeio3fj9-9663971428.shopifypreview.com

Thank you very much for any help in advance!

Replies 25 (25)
dmwwebartisan
Shopify Partner
9731 2224 3052

@soopexclusive 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-index .product-item__image-container {
    max-width: unset !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Natztech
Shopify Partner
2230 564 1363

hello @soopexclusive 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 .template-index  .featured-collection .grid  .product-item .product-item__link-wrapper .product-item__image-container{
     max-width: 100% !important;
}

 

 

soopexclusive
Excursionist
18 0 8

hey @dmwwebartisan , this worked super well! thank you very much for looking into my problem, really happy. Could you also help me with the same problem on the collection page? websitelink: https://w8zh1283oeio3fj9-9663971428.shopifypreview.com I would like to remove the whitespace over there as well, would love to hear from you.

Thanks in advance.

soopexclusive
Excursionist
18 0 8

hey @Natztech , this solution worked as well! thank you very much for looking into my problem. If you have a similar sollution for the same problem on the collection page, it would be really nice? websitelink: https://w8zh1283oeio3fj9-9663971428.shopifypreview.com I would like to remove the whitespace over there as well, would love to hear from you.

Thanks you!

Natztech
Shopify Partner
2230 564 1363

 

hello @soopexclusive 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection  #shopify-section-collection-template .grid  .product-item  .product-item__link-wrapper .product-item__image-container{
        max-width: 100%  !important;
}

 

dmwwebartisan
Shopify Partner
9731 2224 3052

@soopexclusive 

I think you fixed the collection page white space problem. 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
soopexclusive
Excursionist
18 0 8

You're the man @Natztech , super big thanks!! One last question for me would be then, can I also add a 10px whitespace (padding) to my product page pictures? websitelink: https://w8zh1283oeio3fj9-9663971428.shopifypreview.com 

Thanks in advance!

dmwwebartisan
Shopify Partner
9731 2224 3052

@soopexclusive 

You can add the following code at the bottom of your assets/theme.scss.liquid file.

div#shopify-section-product-template {
    padding-top: 45px;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
soopexclusive
Excursionist
18 0 8

 it didn't work, there is no whitespace between the images..

Schermafbeelding 2021-05-15 om 13.53.03.png