Image getting white border on right and bottom in Boundless theme

Tourist
5 0 1

As you can see, the Boundless theme is putting this border around the image. I have made sure that this is not happening when the image is created on our end. It is happening when it is rendered on the page. 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
578 52 115

Hey there, David!

Bo here from Shopify Support.

I can totally see what you mean, that border is definitely not part of the image. This question was a real head-scratcher for me but we got to the bottom of it and we will be able to fix this white outline with a little bit of coding.

NB When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

  • Go to Online Store > Actions > Edit Code.
  • In the "Assets" folder open the theme.scss.liquid.
  • Scroll to the bottom of this file and add the following code:
.collection-list-grid__image-wrapper {
    background: transparent;
}

  • Click Save.

Making the image wrapper transparent as opposed to black will be beneficial as you will not have to alter the code again if you decide to go with a different background color at any time.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,
Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes