Adding a Border to all ma featured collections only for mobile screen. (DAWN THEME)

[AndreyGutthard]

Hey All,

I am going for this grid desgin:

I have everything in place. The only thing that is missing is a border at the top of all of my featured collections only for mobile screen.

I already have one border on my main page (like shown in the picture below) but the code dosen’t apply to the other collections in the other pages:

Please help me to make my code apply to all collections for mobile screen.

URL: https://derstacheldraht.com/collections/samples

Current code in base.ccs:

@media only screen and (max-width: 767px) {
.collection .section-template–19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f-padding {
border-top: 1 !important;
}
ul#Slider-template–19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f {
margin-top: 0px !important;
}
}

.collection {

border-top: 1px solid #B2B2B2 !important;
}

Thanks to everyone reading in advance!

[Moeed]

Hey @AndreyGutthard

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BSSCommerce-TC]

Hi, You can add snippet css below to first line in file base.css

@media only screen and (max-width: 767px) { 
  .collection .grid__item:nth-child(-n + 2) {
	border-top: 1px solid #B2B2B2 !important;
  }
  
  .collection .grid__item:nth-child(n + 2) {
  	border-bottom: 1px solid #B2B2B2 !important; 
  }
}