Remove border on Supply Theme Collection List

Solved
Smbizguru
New Member
2 0 0

See the image below from the home page. The arrows point to the collections shown on the collection list section on the home page in the Supply Theme. 

 

Can someone please instruct me how/where to delete the borders around the collections shown in the collection list?

 

Remove Borders on Supply Theme.png

0 Likes
Guleria
Shopify Partner
1279 266 355

Hello,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.template-index .featured-box {
    border: 0 !important;
}

If still not resolved, then share you store url.

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
0 Likes
Qualitycheck
Shopify Expert
1403 114 222

This is an accepted solution.

Hi @,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.css->paste bellow code in bottom of file
.featured-box{
border:none !important;
}

0 Likes
Smbizguru
New Member
2 0 0

That removed the border. It leaves a pinkish background. How do I save it with a white background?

0 Likes
Qualitycheck
Shopify Expert
1403 114 222

Hi @,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.css->paste bellow code in bottom of file
.featured-box{
background: #ffffff !important;
}

0 Likes
erikalee
New Member
1 0 1

How can i do this for a collection list, and not just featured collections?

Reeii
New Member
1 0 0

Please Change highlighted values in Theme.scss.liquid file: Change this 3 values to completely remove background squre and make the image fill in the square. ** I have removes all other values to make it look clean **

.featured-box {
border: 1px solid $colorBorder;   //--> 1 change to 0
}

right beneath 

&:after {
background-color: rgba(0,0,0,.02);  //--> .02 change to 0
}

scroll down 3 sections til you find 

.featured-box--image {
padding: $gutter /2;                //--> 0$gutter/2 change to $gutter/0
}

now that you changed all values your code should look like this:

 

.featured-box {
  border: 0px solid $colorBorder;
}

  &:after {
    background-color: rgba(0,0,0,0);
  }

.featured-box--image {
  padding: $gutter/0;
}

 

 

0 Likes