how to move the products further away from each other

[Taryckrich]

Hey does anyone know how to move the products further away from each other, some of them are way to close to each other, i have provided photos of what i mean, thanks! Please make sure its for mobile and desktop. @BSS-TekLabs 

[BSS-TekLabs · Accepted solution]

Here is the updated code for fixing the issue on the home page and the "You may also like" section of the product page. Please replace the previous code with this one:

product-recommendations ul.grid,
slider-component ul.grid,
.product-grid-container ul.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* You can adjust this value to change the gap on desktop view to your preference */
    gap: 25px;
}

product-recommendations ul.grid li.grid__item,
slider-component ul.grid li.grid__item,
.product-grid-container ul.grid li.grid__item {
    width: 100%;
    max-width: 100%;
}

@media screen and (max-width: 989px) {
    product-recommendations ul.grid,
    slider-component ul.grid,
    .product-grid-container ul.grid {
        grid-template-columns: repeat(2, 1fr);
        /* You can adjust this value to change the gap on mobile view to your preference */
        gap: 25px;
    }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[BSS-TekLabs · Accepted solution]

We apologize for the delay. Please find the revised code below, which addresses all the issues previously identified. Kindly replace the existing code with this updated version.

product-recommendations ul.grid.product-grid,
.product-grid-container ul.grid.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

slider-component ul.grid.collection-list,
slider-component ul.grid.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

product-recommendations ul.grid.product-grid li.grid__item,
.product-grid-container ul.grid.product-grid li.grid__item,
slider-component ul.grid.collection-list li.grid__item,
slider-component ul.grid.product-grid li.grid__item {
    width: 100%;
    max-width: 100%;
}

@media screen and (max-width: 989px) {
    product-recommendations ul.grid.product-grid,
    .product-grid-container ul.grid.product-grid,
    slider-component ul.grid.collection-list,
    slider-component ul.grid.product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

We sincerely apologize for any inconvenience this may have caused. Thank you for your patience.

[BSS-TekLabs]

Hi @Taryckrich,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.product-grid-container ul.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* You can adjust this value to change the gap on desktop view to your preference */
    gap: 25px;
}

.product-grid-container ul.grid li.grid__item {
    width: 100%;
    max-width: 100%;
}

@media screen and (max-width: 989px) {
    .product-grid-container ul.grid {
        grid-template-columns: repeat(2, 1fr);
        /* You can adjust this value to change the gap on mobile view to your preference */
        gap: 25px;
    }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[Taryckrich]

Hey i added code but i cant see any change on desktop or mobile can you check please, thank you though!

[Taryckrich]

Sorry, i just checked and it has worked for collection pages but not for homepage collections and the ''you may also like'' on the product page

[BSS-TekLabs · Accepted solution]

Here is the updated code for fixing the issue on the home page and the "You may also like" section of the product page. Please replace the previous code with this one:

product-recommendations ul.grid,
slider-component ul.grid,
.product-grid-container ul.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* You can adjust this value to change the gap on desktop view to your preference */
    gap: 25px;
}

product-recommendations ul.grid li.grid__item,
slider-component ul.grid li.grid__item,
.product-grid-container ul.grid li.grid__item {
    width: 100%;
    max-width: 100%;
}

@media screen and (max-width: 989px) {
    product-recommendations ul.grid,
    slider-component ul.grid,
    .product-grid-container ul.grid {
        grid-template-columns: repeat(2, 1fr);
        /* You can adjust this value to change the gap on mobile view to your preference */
        gap: 25px;
    }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[Taryckrich]

That is perfect, you are the best, thank you! For some reason though it made desktop collections 4 columns instead of 5, can you fix this please and make desktop 5 columns again, other then that its perfect!

[BSS-TekLabs]

There you go, you can add this code in addition to the previous snippet. It'll make the collections on desktop 5 columns again

slider-component ul.grid {
    grid-template-columns: repeat(5, 1fr);
}

Feel free to let us know if you need any further customization!

[Taryckrich]

Hey thanks, for some reason my product images look like this now, why did this happen after adding your code? 

[Taryckrich]

Can you please fix the product images on product page, this is all the code i have, can you see what might be causing it, everything else is great.

[BSS-TekLabs · Accepted solution]

We apologize for the delay. Please find the revised code below, which addresses all the issues previously identified. Kindly replace the existing code with this updated version.

product-recommendations ul.grid.product-grid,
.product-grid-container ul.grid.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

slider-component ul.grid.collection-list,
slider-component ul.grid.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

product-recommendations ul.grid.product-grid li.grid__item,
.product-grid-container ul.grid.product-grid li.grid__item,
slider-component ul.grid.collection-list li.grid__item,
slider-component ul.grid.product-grid li.grid__item {
    width: 100%;
    max-width: 100%;
}

@media screen and (max-width: 989px) {
    product-recommendations ul.grid.product-grid,
    .product-grid-container ul.grid.product-grid,
    slider-component ul.grid.collection-list,
    slider-component ul.grid.product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

We sincerely apologize for any inconvenience this may have caused. Thank you for your patience.

[Taryckrich]

Thank you so much, that fixed it all! One other small thing if you are able to, on mobile the homepage and collection pages everything is aligned to the left, can you make collections and homepage all the content alligned to the centre for mobile? 

[BSS-TekLabs · Accepted solution]

There you go, this is the code to center align content on the collections page and homepage. If you want to center align content on the product recommendation as well, please uncomment these lines I've marked. Please add this code after the previous code.

@media screen and (max-width: 989px) {
    /* Uncomment this line to center the product recommendations */
    /* product-recommendations ul.grid.product-grid li.grid__item .card__information a, */
    .product-grid-container ul.grid.product-grid li.grid__item .card__information a,
    slider-component ul.grid.collection-list li.grid__item .card__information a,
    slider-component ul.grid.product-grid li.grid__item .card__information a {
        text-align: center;
    }

    /* Uncomment this line to center the product recommendations */
    /* product-recommendations ul.grid.product-grid li.grid__item .card-information .price__container, */
    .product-grid-container ul.grid.product-grid li.grid__item .card-information .price__container,
    slider-component ul.grid.collection-list li.grid__item .card-information .price__container,
    slider-component ul.grid.product-grid li.grid__item .card-information .price__container {
        display: flex;
        justify-content: center;
    }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[Taryckrich]

thats perfect, i am sorry to be a pain but can you also send code that will centre align the headings on homepage and collections page, for example "Shop by category" etc etc. Thank you so much again! Also, I removed the uncomment this line to centre the you may also like products but they are still alligned to the left, can you send code without the uncomment this line thing cause Im a bit confused what to do there.

[BSS-TekLabs]

Sure, here is the code without the comment to center align the "You may also like" section:

@media screen and (max-width: 989px) {
    product-recommendations ul.grid.product-grid li.grid__item .card__information a,
    .product-grid-container ul.grid.product-grid li.grid__item .card__information a,
    slider-component ul.grid.collection-list li.grid__item .card__information a,
    slider-component ul.grid.product-grid li.grid__item .card__information a {
        text-align: center;
    }

    product-recommendations ul.grid.product-grid li.grid__item .card-information .price__container,
    .product-grid-container ul.grid.product-grid li.grid__item .card-information .price__container,
    slider-component ul.grid.collection-list li.grid__item .card-information .price__container,
    slider-component ul.grid.product-grid li.grid__item .card-information .price__container {
        display: flex;
        justify-content: center;
    }
}

And this is the code to center align the headings on the homepage and collections page
On desktop AND mobile at the same time

.shopify-section > div > .collection-list-wrapper > div,
.shopify-section > div > .collection > .collection__title.title-wrapper {
    display: flex;
    justify-content: center;
}

If you just want to center align the headings on mobile

@media screen and (max-width: 989px) {
    .shopify-section > div > .collection-list-wrapper > div,
    .shopify-section > div > .collection > .collection__title.title-wrapper {
        display: flex;
        justify-content: center;
    }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[Taryckrich]

thats perfect you are the best thank you again!