FROM CACHE - en_header

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 27 (27)
dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
Kinjaldavra
Shopify Partner
2302 569 1407

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;
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
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 @Kinjaldavra , 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!

Kinjaldavra
Shopify Partner
2302 569 1407

 

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;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
soopexclusive
Excursionist
18 0 8

You're the man @Kinjaldavra , 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
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
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

soopexclusive
Excursionist
18 0 8

yes thankyou for your help as well!

 

dmwwebartisan
Shopify Partner
11014 2377 3400

@soopexclusive 

Please remove the old code and add this new code.

.template-collection .collection-grid .product-item__link-wrapper{padding:10px}

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 | Click here GemPages The most powerful Shopify page builder.
soopexclusive
Excursionist
18 0 8

sorry that didn't work as well.. 

dmwwebartisan
Shopify Partner
11014 2377 3400

@soopexclusive 

Are you sure because the above code is for the collection page padding. Please check the attached screenshot. I tried and it worked and the code

should work for all the collections.

collection-page-padding.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
soopexclusive
Excursionist
18 0 8

I meant something else im sorry. I can understand the confusion. I made this layout picture for you to understand it better. I don't want padding between the collection pictures on the homepage and on the collection page (you already fixed that for me). I want a padding between the pictures that are shown on the product page, so if you click on one of the products, you land on the product page. There you have pictures that have no whitespace between them, i want a padding of 10px there just like on the example picture i show here. The change has to be on the product page: https://w8zh1283oeio3fj9-9663971428.shopifypreview.com 

soopexclusive_0-1621081806378.png

 

 

Kinjaldavra
Shopify Partner
2302 569 1407

 

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

#shopify-section-product-template .product .product__photo.grid__item.medium-up--one-half{
    padding:10px  !important;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
dmwwebartisan
Shopify Partner
11014 2377 3400

@soopexclusive 

Just for clarification. In the following url.

https://w8zh1283oeio3fj9-9663971428.shopifypreview.com/products/long-sleeve-the-day-after-the-day-be...

For these pictures, you want to add padding?

 

these-pictures.jpg

 

If yes then add the following code.

#shopify-section-product-template .product__photo{
padding: 10px;
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
soopexclusive
Excursionist
18 0 8
dmwwebartisan
Shopify Partner
11014 2377 3400

@soopexclusive 

Please add the following code.

#shopify-section-product-template .product__photo{
padding: 10px;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
soopexclusive
Excursionist
18 0 8

So good, I can't thank you enough! @Kinjaldavra . That's it for now, can I ask you some little questions again? You have been a real help