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!!
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
1 Like
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;
}
}
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.
1 Like
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:
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
1 Like
@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:
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
1 Like
WOW @BSSCommerce-B2B ,
I saw it super late but this really woked perfectly! Finally! Thank you so much!
