(Dawn) How to add space between product images in featured collection

[friendlyrobot19]

How to add a gap in-between each of these product images.

Example:

Store link: https://95d536-88.myshopify.com/         

Store keycode: www

[Moeed]

Hey @friendlyrobot19 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.grid {
    column-gap: 40px !important;
}
.grid--4-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing)* 3 / 4) !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Huptech-Web]

Hey @friendlyrobot19, just follow these steps to increase or decrease the space without any code!

https://app.tango.us/app/workflow/How-to-add-space-using-layout-settings-8616877d28e34b5aa1e083f2f8b... 

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
K.K

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @friendlyrobot19 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (min-width: 600px) {
.grid {
 column-gap: 30px !important;
}
    .grid--4-col-desktop .grid__item {
        width: calc(20% - var(--grid-desktop-horizontal-spacing)* 3 / 4) !important;
    }
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.