Adjust Gaps between Collection Images

[lucianofashion1]

Hi, i am using theme BLOCKSHOP v10.0.1  CLICK HERE 

See Image below, i would like to make the gaps Narrow between Collection Page images as there is too much white.

Any help would be appreciated.

Thanks

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @lucianofashion1 
- 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.

 

.collection--body--grid {
     grid-gap: 12px !important;
}

- Here is the result you will achieve:

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

[BSS-TekLabs · Accepted solution]

[data-container=panel] {
    grid-gap: 12px !important;
}

Can you try add more this code to last line file theme.css @lucianofashion1 

[BSS-TekLabs · Accepted solution]

@lucianofashion1  can you try add more this code

.collection--body--root {
        padding-right: 10px !important;
        padding-left: 10px !important;
}

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

[BSS-TekLabs · Accepted solution]

Can you replace to this code @lucianofashion1 

.collection--body--root, .featured-grid--root {
        padding-right: 10px !important;
        padding-left: 10px !important;
}

[Moeed]

Hey @lucianofashion1 

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>
.collection--body--grid {
    grid-gap: 10px !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[lucianofashion1]

This worked for the collection page thanks

I would also like to make the gaps Narrow between Main Page 'Grid With Overlay'

see attached image,

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @lucianofashion1 
- 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.

 

.collection--body--grid {
     grid-gap: 12px !important;
}

- Here is the result you will achieve:

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

[lucianofashion1]

This worked for the collection page thanks

I would also like to make the gaps Narrow between Main Page 'Grid With Overlay'

see attached image,

[BSS-TekLabs · Accepted solution]

[data-container=panel] {
    grid-gap: 12px !important;
}

Can you try add more this code to last line file theme.css @lucianofashion1 

[BSS-TekLabs · Accepted solution]

@lucianofashion1  can you try add more this code

.collection--body--root {
        padding-right: 10px !important;
        padding-left: 10px !important;
}

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

[BSS-TekLabs · Accepted solution]

Can you replace to this code @lucianofashion1 

.collection--body--root, .featured-grid--root {
        padding-right: 10px !important;
        padding-left: 10px !important;
}

[BSS-TekLabs · Accepted solution]

Can you add more this code @lucianofashion1 

@media only screen and (max-width: 600px) {
.product-page--root {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
}