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

Solved

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

AndreyGutthard
Excursionist
31 0 7

Hey All,

 

I'm using dawn theme.

 

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

 

AndreyGutthard_1-1718273735437.png

 

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/

 

AndreyGutthard_2-1718273837676.png

 

 

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!!

Accepted Solutions (2)
BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

The first issue.

BSSCommerceB2B_1-1718294431088.png

Access base.css. Find the following CSS snippet.

BSSCommerceB2B_2-1718294493990.png

Change 51% to 50%.

Second issue.

BSSCommerceB2B_4-1718294546346.png

Remove the !important from the code below.

BSSCommerceB2B_5-1718294627534.png

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

BSSCommerceB2B_6-1718294883022.png

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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

BSSCommerce-B2B
Shopify Partner
565 114 137

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

BSSCommerceB2B_2-1718338890962.png

 

Have a nive day my friend

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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

BSSCommerce-B2B
Shopify Partner
565 114 137

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

BSSCommerceB2B_0-1718289195614.png

Then the issue of will disappear.

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

Best Regards

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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


BSS Commerce - Full-service eCommerce Agency
AndreyGutthard
Excursionist
31 0 7

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
Shopify Partner
565 114 137

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.

BSSCommerceB2B_1-1718291147208.png

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

BSSCommerceB2B_0-1718290998370.png

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.

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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


BSS Commerce - Full-service eCommerce Agency
AndreyGutthard
Excursionist
31 0 7

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: 

 Screenshot 2024-06-13 173612.pngScreenshot 2024-06-13 173551.png

 

 

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

The first issue.

BSSCommerceB2B_1-1718294431088.png

Access base.css. Find the following CSS snippet.

BSSCommerceB2B_2-1718294493990.png

Change 51% to 50%.

Second issue.

BSSCommerceB2B_4-1718294546346.png

Remove the !important from the code below.

BSSCommerceB2B_5-1718294627534.png

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

BSSCommerceB2B_6-1718294883022.png

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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


BSS Commerce - Full-service eCommerce Agency
AndreyGutthard
Excursionist
31 0 7

@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:Screenshot 2024-06-13 203857.png

BSSCommerce-B2B
Shopify Partner
565 114 137

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

BSSCommerceB2B_2-1718338890962.png

 

Have a nive day my friend

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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


BSS Commerce - Full-service eCommerce Agency
AndreyGutthard
Excursionist
31 0 7

WOW @BSSCommerce-B2B,

 

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