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 </body> tag

<style>
@media screen and (max-width: 767px) {
.grid {
    margin-top: 2px !important;
}
.collection .grid__item {
    border: solid 1px black !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[BSSCommerce-TC · Accepted solution]

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; 
  }
}