Product Grid Border dosent work on collections with uneven amounts of products.(Dawn Theme) (MOBILE)

[AndreyGutthard]

Hey All,

I'm using dawn theme.

Ive been going for this grid design but on mobile screen:

But in my case: when there is an un-even number of items in the collection the grid dosent work properly.

URL: https://derstacheldraht.com/

Current Code in Base.css:

@media (max-width: 767px){
slider-component {

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

.collection .grid__item {

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

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

@media screen and (max-width: 767px)
{
.collection .grid__item {

max-width: calc(51% - var(--grid-mobile-horizontal-spacing) / 2) !important;

}

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

If anybody can find a solution on this, so it looks like in my inspiration, I would greatly appreaciate!

 It's important that this works on all collections and on MOBILE SCREEN.

Thank you in advance!!

[BSSCommerce-B2B · Accepted solution]

The first issue.

Access base.css. Find the following CSS snippet.

Change 51% to 50%.

Second issue.

Remove the !important from the code below.

After that, please search for the JavaScript file, for example, theme.js. Add the following JavaScript snippet.

setTimeout(() => {
let grid_items = document.querySelectorAll(".grid.product-grid .grid__item");
if(grid_items.length) {
if (grid_items.length % 2 === 1) {
    console.log(123);
    grid_items[grid_items.length - 1].style.border = "none";
    document.querySelector(".grid.product-grid").style.borderBottom = "1px solid #b2b2b2"
}
}
}, 500)

Result

[BSSCommerce-B2B]

Hi @AndreyGutthard

You find this CSS snippet in the file base.css above

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

 Please change it to

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

Result

Then the issue of will disappear.

If it helps you, please like and mark it as the solution.

Best Regards

[AndreyGutthard]

Hey @BSSCommerce-B2B,

Thank you so much for your reply!

Sadly it diden't change anything. 😑 Maybe I'm missing something?

Code in Base.css :

@media (max-width: 767px){
slider-component {

padding: 0 !important;
}
@media only screen and (max-width: 767px) {
.collection .grid__item:nth-child(1n) .card__content {
border-right: 1px solid #B2B2B2 !important;
}

.collection .grid__item {

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

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

@media screen and (max-width: 767px)
{
.collection .grid__item {

max-width: calc(51% - var(--grid-mobile-horizontal-spacing) / 2) !important;

}

@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;
}
.rich-text__text.rte p {
font-size: 12px;
line-height: 19px;
}
@media screen and (max-width: 500px) {
.header-wrapper .header {
grid-template-columns: 1fr 7fr 1fr;
}
.header-wrapper .header .header__icon,
.header-wrapper .header .header__icon--cart .icon {
height: 3.4rem;
width: 3.4rem;
}
}

[BSSCommerce-B2B]

I think I did it right, but the border disappears when the last row only has 1 image instead of the full 2.
When I access your website with mobile dimensions, it's displaying like this.

Then, intentionally, I removed the last image. The result looks like this.

The border is indeed being filled, but I missed something without realizing it. Please provide detailed information with a screenshot describing the remaining issue, and I'll assist you in a few minutes.

[AndreyGutthard]

Okey I understand.

Your absolutely right, It works perfectly fine when the product row is filled with two items.

But sometimes we dont have another product to add, because there is a specific categorie that has a limited amount of items in the collection.

Is there maybe a way of adding a product and hide the product titel and price on only that product so that i can add it in a collection if needed? 

Remaining problem: 

 

[BSSCommerce-B2B · Accepted solution]

The first issue.

Access base.css. Find the following CSS snippet.

Change 51% to 50%.

Second issue.

Remove the !important from the code below.

After that, please search for the JavaScript file, for example, theme.js. Add the following JavaScript snippet.

setTimeout(() => {
let grid_items = document.querySelectorAll(".grid.product-grid .grid__item");
if(grid_items.length) {
if (grid_items.length % 2 === 1) {
    console.log(123);
    grid_items[grid_items.length - 1].style.border = "none";
    document.querySelector(".grid.product-grid").style.borderBottom = "1px solid #b2b2b2"
}
}
}, 500)

Result

[AndreyGutthard]

@BSSCommerce-B2B 

The second issue is solved beautifully with this code in the java file!

The first issue is an old problem: I removed the collumn gap and it keept getting pushed to the right side.

Whitout the code:

@media screen and (max-width: 767px)
{
.collection .grid__item {

max-width: calc(51% - var(--grid-mobile-horizontal-spacing) / 2) !important;

It will always look like this:

[BSSCommerce-B2B · Accepted solution]

Hi @AndreyGutthard 

Thank you for the detailed images illustrating your issue. They made it much easier for me to visualize the problem than just descriptions in words. As for your issue, I see it's simply a matter of fixing...

@media screen and (max-width: 767px)
{
.collection .grid__item {

max-width: calc(51% - var(--grid-mobile-horizontal-spacing) / 2) !important;

 please change it to

@media screen and (max-width: 767px)
{
.collection .grid__item {

max-width: 50% !important;

Result

Have a nive day my friend

[AndreyGutthard]

WOW @BSSCommerce-B2B,

I saw it super late but this really woked perfectly! Finally! Thank you so much!