Remove Box on Product Page

[BettyslChan]

Hello Everyone!

I want to remove/make the box invisible (see attached picture). Any help is appreciated. TIA. 

[suyash1]

@BettyslChan - can you please share this page link?

[BettyslChan]

URL: posyandclay.com

PW: workinprogress

[BSSCommerce-HDL]

Hi @BettyslChan, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

.product__info-wrapper.grid__item {
    padding: 0 !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BettyslChan]

Hello @BSSCommerce-HDL , 

Thank you for sharing a solution. I tried it. However, it's not working on my webpage. Not sure if I am doing anything differently. 

[BSSCommerce-HDL]

Hi @BettyslChan, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BettyslChan]

Hello @BSSCommerce-HDL 

Thank you. Sadly, it still does not work. But instead, it brought the texts closer to the box.

[BSSCommerce-HDL]

Hi @BettyslChan, 

I think your border problem is because this image has been taken and has such a border available

Link img problem:  https://posyandclay.com/cdn/shop/files/PRODUCT_2.png?v=1719086175&width=600 

Pls check it. Thank you 😍

[BettyslChan]

Hello @BSSCommerce-HDL 

The black border is meant to be part of the design with image. The image was downloaded to have an invisible background. This works when "All Products" are displayed (see attached picture). However, when I clicked to view each item that greyish square border appears. 

My apologies. I know this can be quite frustrating. 

[BSSCommerce-HDL]

Hi @BettyslChan, Pls insert this code: 

.product-media-container.media-type-image.media-fit-contain.global-media-settings {
    border: none !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍