How do i remove the white border around the collection list?

Shopify Discussion
1

Hi,

I am trying to remove the white border on the collection list on both mobile and desktop view.

I want the photos to be seamless with no space in- between and being full screen.

Screenshot 2024-12-29 at 23.21.21.png
Screenshot 2024-12-29 at 23.21.21.png420×465 152 KB

Screenshot 2024-12-29 at 23.22.21.png
Screenshot 2024-12-29 at 23.22.21.png1589×393 367 KB

2

Hello there Minnie @minnie1999xx To remove the white border around the collection list, follow these steps-

  1. Access your Shopify Admin.
  2. Go to Online Store > Themes.
  3. Locate the theme you are currently using and select Actions > Edit code.
  4. In a CSS file: Go to Assets, find your CSS file, and add your styles, OR in base.css OR,
  5. In theme.liquid: Go to Layout, open theme.liquid, and add your CSS inside a tag in the section.
    .collection-list-wrapper .card-wrapper .card__inner{
    border: none;
    }

Let me know if this works for you!

3

Hi @minnie1999xx ,

Can you share with me your store URL so I can help further?

Look forward to your response.

Best,

Daisy

4

You will need to modify the CSS of your Shopify theme:

  • Log in to your Shopify admin panel.
  • Go to Online Store > Themes.
  • Find your current theme and click on Actions > Edit Code.
  • Add this at the bottom of the file:

.collection-list, .collection-item {
margin: 0; padding: 0; border: none;
}

.collection-item img {
display: block;
width: 100vw; height: 100vh;
object-fit: cover;
}

  • Save the changes, then test on desktop and mobile.

Good luck!

5

Hi @minnie1999xx , thank you for posting here!

You can follow my instructions below:

  1. Go to Online Store->Theme->Edit code
  2. FIND theme.liquid: Go to Layout, open theme. liquid, and add CSS code inside a tag in the section.
.collection-list-wrapper .card-wrapper .card__inner{
border: none;
}

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

6

Hi @minnie1999xx

Could you share the link to your store so I can check?

7

Hi @minnie1999xx , thanks for reaching out.

To assist you further, could you kindly share your store URL and the Theme you’re using?

Thanks for your cooperation in this matter.

Liz

8

Its not a border.. it’s casing because of the gapping by default. you can change it via custom css

9

Hi @minnie1999xx ,

I haven’t got your response regarding the store URL.

Can you share your store URL so that we can assist further?

Look forward to your response.

Best,

Daisy

10

Hi, where on the code exactly do I insert?

11

Do you know the custom CSS to do this?

12

Could you say specifically where i put the code? In which CSS file of the code?