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

Solved

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

AndreyGutthard
Excursionist
28 0 6

Hey All,

 

I am going for this grid desgin: 

Screenshot 2024-07-02 164920.png

 

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: 

 

Screenshot 2024-07-02 164824.png

 

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!

Accepted Solution (1)

BSSCommerce-TC
Shopify Partner
215 46 49

This is an 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; 
  }
}

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

CyberCraft_11
Shopify Partner
19 1 2

Hello @AndreyGutthard ,

 To add the borders around the product items on your site, you just need to follow below steps:

1. Go to admin > Online store > Edit code.

2. In the code directory, find the file named "base.css" and open it.

3. Copy the below mentioned code and paste it at the end of the base.css file.

product-grid .grid__item {
  border: 1px solid #000;
}

4. Don't forget to save the file after made changes in it.

 

Hope this solution works for your issue and fix it.

If this solution works for you, then kindly like and accept the solution as solved !

DM me if you have any further issues.

Moeed
Shopify Partner
4361 1123 1380

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:

Moeed_0-1719934105011.png

 

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

 

Best Regards,
Moeed

 

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

BSSCommerce-TC
Shopify Partner
215 46 49

This is an 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; 
  }
}

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency