Solved

Add black grid in between products. Hide outer grid lines. Dawn Theme

AndreyGutthard
Excursionist
24 0 6

Hey All 👋,

 

I'm using Dawn Theme.

 

I've been trying to achieve this kind of collection grid design. For now it dosent matter if the border goes around the product card or the product picture. 

 

AndreyGutthard_0-1715952092907.png

 

 

current code in case.css : 

 

@media (max-width: 767px){

slider-component {

padding: 0 !important;

}
ul.product-grid {
column-gap: 0;
row-gap: 0;
}
.card__inner {border: 1px solid #000000 !important;}

 

 

 

current result: URL: https://derstacheldraht.com/

 

AndreyGutthard_3-1715954627748.png

 

 

The middle border is thinker than the outer ones because the left and right border combines.

 

I want to try to only use: border-left or right: 1px solid black; and somehow have it not show on the very edge of the page (marked yellow in ref.) but only in the middle between the two products.

 

For the top and bottom border i could use a border between sections without padding and only border-top: 1px solid black;.

 

If you have and lead/idea, please let me know. 

 

Thanks in advance!

Accepted Solution (1)
BSSCommerce-HDL
Shopify Expert
769 249 263

This is an accepted solution.

Hi @AndreyGutthard
This code for your mobile : 

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

  .collection .grid__item {
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
  }
   
  .grid {
   column-gap: 0 !important;
   row-gap: 0 !important;
  }
}

Here is result: 

BSSTechVenture_0-1715959592556.png

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


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 4 (4)

BSSCommerce-HDL
Shopify Expert
769 249 263

Hi @AndreyGutthard

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1715956553394.png

 

Step 2: Search file base.css,  theme.css or styles.css

BSSTechVenture_1-1715956558194.png

 

Step 3: Insert the below code at the bottom of the file -> Save

.collection .grid__item:nth-child(3n + 2) {
    border-left: 1px solid black !important;
     border-right: 1px solid black !important;
  }

  .collection .grid__item {
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
  }

.grid {
   column-gap: 0 !important;
   row-gap: 0 !important;
}

 

Here is result: 

BSSTechVenture_2-1715956613881.png

Hope this can help you,

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

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


B2B Solution & Custom Pricing | Product Labels by BSS


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


BSS Commerce - Full-service eCommerce Agency
AndreyGutthard
Excursionist
24 0 6

Hey @BSSCommerce-HDL,

 

Thank you for replying so fast. 

 

Im sorry i should have mentioned that I need the design to be optimized for smartphone view. It should have 2 collums

 

This is the current result with your suggested code:

AndreyGutthard_0-1715958121528.png

 

Idealy she padding on the sides is 0px. 

 

AndreyGutthard_1-1715958621715.png

 

 

(The code for removing the padding on the sides still works. I just took it out to make sure it's not messing anything up.)

 

@media (max-width: 767px){

slider-component {

padding: 0 !important;

 

Thank you for taking the time so far!

BSSCommerce-HDL
Shopify Expert
769 249 263

This is an accepted solution.

Hi @AndreyGutthard
This code for your mobile : 

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

  .collection .grid__item {
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
  }
   
  .grid {
   column-gap: 0 !important;
   row-gap: 0 !important;
  }
}

Here is result: 

BSSTechVenture_0-1715959592556.png

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


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


BSS Commerce - Full-service eCommerce Agency
AndreyGutthard
Excursionist
24 0 6

Thank you so much @BSSCommerce-HDL .

 

What a great improvemt!😁

 

 

Current result:

AndreyGutthard_1-1715961713234.png

 

There is still a small gap on the right side. It comes from removing the side padding whit:

 

@media (max-width: 767px){

slider-component {

padding: 0 !important;

 

and closing the collum gap to 0 after.

 

.grid {
column-gap: 0 !important;

 

the the collum gap just gets pushed to the right side.

 

AndreyGutthard_2-1715962169593.png

 

 

If you have any suggestion to remove it, I will be exremely greatfull.

 

But I can also try myself and open a new discussion on it.

 

 

Thank you for all the great help!